/*! آینۀ حافظه‌دار | © شوت‌شات — All rights reserved. */
@font-face {
font-family: "Pinar";
src: url("assets/fonts/pinar-vf.woff2") format("woff2-variations"),
url("assets/fonts/pinar-vf.woff2") format("woff2");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: dark;
--bg: #0B0A08;
--bg-2: #12100D;
--bg-3: #1A1713;
--ink: #F5EEE1;
--ink-2: #CFC5B3;
--muted: #A79D8C;
--faint: #6B6355;
--line: rgba(255, 236, 200, .08);
--line-2: rgba(255, 236, 200, .15);
--y: #FBB545;
--y-hi: #FFD68A;
--y-deep: #E39A2C;
--y-soft: rgba(251, 181, 69, .10);
--y-glow: rgba(251, 181, 69, .45);
--gold: linear-gradient(180deg, #FFE3A6 0%, #FBB545 50%, #D98A1E 100%);
--ag: #CFD8E0;
--ag-soft: rgba(207, 216, 224, .12);
--red: #FF6B57;
--green: #4ED38C;
--flame: #FF8A3D;
--r: 22px;
--r-md: 16px;
--r-sm: 12px;
--ease: cubic-bezier(.2, .8, .2, 1);
--spring: cubic-bezier(.34, 1.56, .64, 1);
--shadow: inset 0 1px 0 rgba(255, 240, 215, .06), 0 40px 90px -40px rgba(0, 0, 0, .9);
}
@property --deg { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html, body { margin: 0; min-height: 100%; }
body {
position: relative;
background:
radial-gradient(1100px 620px at 88% -8%, rgba(251, 181, 69, .16), transparent 62%),
radial-gradient(900px 520px at -12% 108%, rgba(200, 90, 36, .11), transparent 60%),
var(--bg);
background-attachment: fixed;
color: var(--ink);
font-family: "Pinar", system-ui, Tahoma, sans-serif;
font-size: 16px;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .07;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .6));
}
.leak {
position: fixed; z-index: 0; pointer-events: none; width: 520px; height: 520px; border-radius: 50%;
top: -220px; right: -120px; filter: blur(80px); opacity: .22;
background: radial-gradient(closest-side, #FF9B3D, transparent);
animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-180px, 120px) scale(1.2); opacity: .12; } }
::selection { background: rgba(251, 181, 69, .35); color: #fff; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; border-radius: 6px; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
header {
position: sticky; top: 0; z-index: 20;
background: rgba(11, 10, 8, .68);
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
}
header::after {
content: ""; position: absolute; inset: auto 0 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 236, 200, .1) 25%, rgba(251, 181, 69, .45) 75%, transparent);
}
header .inner {
position: relative; max-width: 880px; margin: 0 auto; padding: 10px 20px; min-height: 68px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
display: flex; align-items: center; gap: 14px; min-width: 0;
padding: 4px 6px; margin-inline-start: -6px; border: 0; background: none;
border-radius: 12px; transition: background .2s, transform .18s var(--ease);
}
.brand:hover { background: rgba(255, 240, 215, .05); }
.brand:active { transform: scale(.97); }
.brand img { height: 28px; width: auto; display: block; flex: none; filter: drop-shadow(0 0 16px rgba(251, 181, 69, .28)); }
.brand-sep { width: 1px; height: 30px; background: var(--line-2); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-text b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.brand-text small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.account { position: relative; flex: none; }
.hdr-login {
display: inline-flex; align-items: center; gap: 8px;
background: var(--y-soft); color: var(--y-hi); border: 1px solid rgba(251, 181, 69, .35);
border-radius: 999px; padding: 7px 18px; font-size: 14px; font-weight: 700;
transition: background .2s, box-shadow .25s;
}
.hdr-login:hover { background: rgba(251, 181, 69, .18); box-shadow: 0 0 26px -6px var(--y-glow); }
.pbtn {
display: flex; align-items: center; gap: 12px; max-width: 290px;
background: rgba(255, 240, 215, .04); border: 1px solid var(--line-2); border-radius: 999px;
padding: 6px 16px 6px 12px;
transition: border-color .2s, background .2s, box-shadow .25s;
}
.pbtn:hover, .pbtn[aria-expanded="true"] {
border-color: rgba(251, 181, 69, .5); background: rgba(251, 181, 69, .07);
box-shadow: 0 0 0 4px rgba(251, 181, 69, .08), 0 12px 30px -14px var(--y-glow);
}
.pb-dot {
flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--y);
box-shadow: 0 0 0 3px rgba(251, 181, 69, .16), 0 0 12px var(--y);
}
.pb-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; min-width: 0; text-align: right; }
.pb-text b { font-size: 13.5px; font-weight: 700; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-text small { font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbtn .chev { width: 14px; height: 14px; color: var(--muted); transition: transform .25s var(--ease); }
.pbtn[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--y); }
.uname { color: var(--muted); font-size: 13px; direction: ltr; text-align: right; unicode-bidi: isolate; }
.pmenu {
position: absolute; z-index: 40; top: calc(100% + 12px); inset-inline-end: 0; width: 320px;
background: linear-gradient(180deg, #1C1915, #121010);
border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden;
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 240, 215, .07);
transform-origin: top left; animation: menu-in .24s var(--ease) both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.pm-head {
position: relative; padding: 22px 22px 18px;
background: radial-gradient(280px 150px at 90% -10%, rgba(251, 181, 69, .24), transparent 70%);
}
.pm-kicker { display: block; font-size: 12.5px; font-weight: 600; color: var(--y); margin-bottom: 2px; }
.pm-head b { display: block; font-size: 21px; font-weight: 800; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-head .uname { display: block; color: var(--y-hi); opacity: .8; }
.pm-stats {
display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 14px;
border: 1px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, .3);
}
.pm-stats div { padding: 12px 6px 10px; text-align: center; line-height: 1.3; }
.pm-stats div + div { border-inline-start: 1px solid var(--line); }
.pm-stats b { display: block; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pm-stats div:first-child b { color: var(--y); text-shadow: 0 0 18px rgba(251, 181, 69, .35); }
.pm-stats span { font-size: 12px; color: var(--muted); }
.pm-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 22px 0; font-size: 13.5px; color: var(--muted); }
.pm-row bdi { color: var(--ink-2); letter-spacing: .06em; }
.pm-list { padding: 8px; margin-top: 14px; border-top: 1px solid var(--line); }
.pm-item {
display: flex; align-items: center; gap: 12px; width: 100%;
background: none; border: 0; border-radius: 10px; padding: 10px 12px;
font-size: 15px; text-align: right; color: var(--ink-2); transition: background .15s, color .15s;
}
.pm-item svg { color: var(--muted); transition: color .15s, transform .2s var(--ease); }
.pm-item:hover, .pm-item:focus-visible { background: rgba(255, 240, 215, .05); color: var(--ink); }
.pm-item:hover svg { color: var(--y); transform: scale(1.1); }
.pm-item.danger, .pm-item.danger svg { color: var(--red); }
.pm-item.danger:hover { background: rgba(255, 107, 87, .1); }
.pm-sep { height: 1px; background: var(--line); margin: 4px 8px; }
.wrap { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 32px 20px 72px; }
.screen { display: none; }
.screen.active { display: block; animation: rise .6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.card {
position: relative; isolation: isolate; overflow: hidden;
background: linear-gradient(180deg, rgba(255, 240, 215, .045), rgba(255, 240, 215, .01) 45%), var(--bg-2);
border-radius: var(--r); box-shadow: var(--shadow);
}
.card::before {
content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; padding: 1px;
background: linear-gradient(155deg, rgba(251, 181, 69, .45), rgba(255, 236, 200, .08) 28%, rgba(255, 236, 200, .06) 72%, rgba(251, 181, 69, .18));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.pad { padding: 28px; }
.hero { position: relative; text-align: center; padding: 44px 28px 28px; }
.hero::before {
content: ""; position: absolute; z-index: -1; left: 50%; top: -170px; width: 560px; height: 340px;
transform: translateX(-50%); pointer-events: none;
background: radial-gradient(closest-side, rgba(251, 181, 69, .2), transparent);
}
.eyebrow {
position: relative; display: inline-flex; align-items: center; gap: 10px;
font-size: 13.5px; font-weight: 600; color: var(--y); margin-bottom: 12px;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--y)); }
.eyebrow::after { transform: scaleX(-1); }
h1 { font-size: clamp(28px, 5.4vw, 40px); font-weight: 800; line-height: 1.4; margin: 0 0 10px; }
.lede { color: var(--ink-2); max-width: 32em; margin: 0 auto 24px; font-size: 16.5px; line-height: 2.05; }
.lede b { color: var(--y-hi); font-weight: 800; }
.emblem { position: relative; width: 104px; height: 104px; margin: 0 auto 18px; color: var(--y); }
.emblem.sm { width: 64px; height: 64px; margin-bottom: 14px; }
.emblem::before {
content: ""; position: absolute; inset: -45%;
background: radial-gradient(closest-side, rgba(251, 181, 69, .32), transparent);
}
.emblem svg { position: relative; width: 100%; height: 100%; animation: spin 60s linear infinite; filter: drop-shadow(0 0 10px rgba(251, 181, 69, .5)); }
@keyframes spin { to { transform: rotate(360deg); } }
input[type=text], input[type=tel] {
width: 100%; font: inherit; color: var(--ink);
background: rgba(0, 0, 0, .38); border: 1px solid var(--line-2); border-radius: 14px;
padding: 14px 16px; transition: border-color .2s, background .2s, box-shadow .25s;
}
input[type=text]:focus, input[type=tel]:focus {
outline: none; border-color: var(--y); background: rgba(0, 0, 0, .55);
box-shadow: 0 0 0 4px rgba(251, 181, 69, .13), 0 0 34px -12px var(--y-glow);
}
input::placeholder { color: var(--faint); opacity: 1; }
.form { display: grid; gap: 12px; padding-top: 4px; }
.field { display: grid; gap: 7px; }
.field .lbl { font-size: 15px; font-weight: 700; color: var(--ink); }
.field .lbl i { font-style: normal; color: var(--muted); font-weight: 400; font-size: 13px; margin-inline-start: 8px; }
.field.invalid input { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255, 107, 87, .12); }
.uwrap { position: relative; display: block; direction: ltr; }
.uwrap input { direction: ltr; text-align: left; padding-left: 38px; padding-right: 42px; letter-spacing: .02em; }
.uwrap .at { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--y); font-weight: 800; pointer-events: none; }
.ustate { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; }
.ustate svg { width: 18px; height: 18px; }
.ustate.ok { color: var(--green); filter: drop-shadow(0 0 6px rgba(78, 211, 140, .6)); }
.ustate.bad { color: var(--red); }
.ustate.wait::after {
content: ""; width: 14px; height: 14px; border-radius: 50%;
border: 2px solid var(--line-2); border-top-color: var(--y); animation: spin .7s linear infinite;
}
.notice {
display: flex; gap: 10px; align-items: flex-start;
background: linear-gradient(90deg, rgba(251, 181, 69, .12), rgba(251, 181, 69, .04));
border: 1px solid rgba(251, 181, 69, .28); border-radius: var(--r-sm);
padding: 10px 14px; font-size: 14px; line-height: 1.8; color: var(--ink-2);
}
.notice svg { margin-top: 2px; color: var(--y); }
.fmsg { font-size: 13.5px; line-height: 1.5; min-height: 19px; color: var(--muted); }
.fmsg.ok { color: var(--green); }
.fmsg.err { color: var(--red); }
.preview { border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 12px 16px; background: rgba(0, 0, 0, .2); }
.preview > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.preview-row { display: flex; align-items: center; gap: 14px; }
.preview-row .who-t { flex: 1; }
.preview-row .pts { color: var(--muted); font-size: 14px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.form-actions .btn { flex: 1 1 160px; }
#login-msg.err { color: var(--red); }
#login-msg.ok { color: var(--ink-2); }
.devcode {
display: block; margin-top: 10px; padding: 10px; border-radius: var(--r-sm);
background: var(--y-soft); border: 1px dashed rgba(251, 181, 69, .5);
color: var(--y-hi); font-weight: 900; font-size: 20px; letter-spacing: .35em;
}
.note { color: var(--red); padding: 0 28px 24px; margin: -6px 0 0; font-size: 14px; }
.btn {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
background: linear-gradient(180deg, #FFD37C, #FBB545 55%, #EE9E2D);
color: #1B1206; border: 0; border-radius: 14px; padding: 15px 30px;
font-size: 16px; font-weight: 800;
box-shadow: 0 14px 34px -14px rgba(251, 181, 69, .8), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(120, 60, 0, .2);
transition: transform .2s var(--ease), box-shadow .25s;
}
.btn::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
transform: skewX(-20deg); transition: left .8s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(251, 181, 69, .95), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(120, 60, 0, .2); }
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }
.btn.lg { padding: 17px 40px; font-size: 17px; }
.btn.ghost {
background: rgba(255, 240, 215, .04); color: var(--ink); border: 1px solid var(--line-2);
box-shadow: none; font-weight: 600;
}
.btn.ghost::after { display: none; }
.btn.ghost:hover { border-color: rgba(251, 181, 69, .5); background: rgba(251, 181, 69, .07); box-shadow: 0 12px 30px -18px var(--y-glow); }
.btn.ghost svg { color: var(--y); }
.btn.pulse { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe {
50% { box-shadow: 0 14px 44px -10px rgba(251, 181, 69, .95), 0 0 0 6px rgba(251, 181, 69, .08), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(120, 60, 0, .2); }
}
.intro-hero { padding: 40px 32px 30px; }
.greet {
display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%;
margin: 0 auto 26px; padding: 6px 16px; border-radius: 999px;
background: rgba(255, 240, 215, .04); border: 1px solid var(--line-2);
font-size: 14.5px; color: var(--ink-2);
}
.greet b { color: var(--ink); }
.live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.display { font-size: clamp(46px, 10.5vw, 80px); font-weight: 900; line-height: 1.25; margin: 0 0 14px; }
.display .thin { font-weight: 300; }
.gold {
background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 8px 28px rgba(251, 181, 69, .28));
}
.tagline {
display: flex; align-items: center; justify-content: center; gap: 14px;
margin: 0 auto 16px; font-size: clamp(15px, 2.5vw, 18px); font-weight: 600; color: var(--ink);
}
.tagline::before, .tagline::after { content: ""; flex: 0 1 52px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.tagline::after { transform: scaleX(-1); }
.film { position: relative; background: #070605; border-block: 1px solid var(--line); padding: 24px 0; }
.film::before, .film::after {
content: ""; position: absolute; inset-inline: 0; height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Crect x='6' y='1.5' width='12' height='7' rx='2' fill='%23F5EEE1' fill-opacity='.14'/%3E%3C/svg%3E") repeat-x center / 24px 10px;
}
.film::before { top: 6px; }
.film::after { bottom: 6px; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.fr {
position: relative; overflow: hidden; border-radius: 8px; padding: 18px 18px 16px;
background: linear-gradient(180deg, #1C1915, #13110E); border: 1px solid var(--line);
transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.fr:hover { transform: translateY(-3px); border-color: rgba(251, 181, 69, .4); box-shadow: 0 18px 40px -22px var(--y-glow); }
.fr .no {
position: absolute; left: 12px; top: 8px; font-size: 44px; font-weight: 900; line-height: 1.4;
color: transparent; -webkit-text-stroke: 1px rgba(251, 181, 69, .4); pointer-events: none;
}
.fr .ic {
display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px;
border-radius: 10px; background: var(--y-soft); color: var(--y); border: 1px solid rgba(251, 181, 69, .25);
}
.fr b { display: block; font-size: 18px; font-weight: 800; margin-bottom: 2px; }
.fr .tx { display: block; font-size: 14px; color: var(--muted); line-height: 1.85; }
.rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rules > div { padding: 18px 18px 24px; text-align: center; }
.rules > div + div { border-inline-start: 1px solid var(--line); }
.rules b {
display: block; font-size: 54px; font-weight: 900; line-height: 1.45; padding-top: 2px;
background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rules > div > span { display: block; margin-top: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.pips { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 22px; margin: 10px 0 2px; }
.pips.dots i { width: 8px; height: 8px; border: 0; border-radius: 50%; background: rgba(255, 236, 200, .2); box-shadow: none; }
.pips.dots i:last-child { width: 12px; height: 12px; background: var(--y); box-shadow: 0 0 12px var(--y); }
.rules small { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.rules small em { font-style: normal; }
.start-row {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr;
gap: 12px; padding: 22px 28px 28px; border-top: 1px solid var(--line);
}
.start-row > * { width: 100%; margin: 0; }
.start-row .span2 { grid-column: 1 / -1; }
.best {
display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
font-size: 14px; color: var(--muted); padding: 10px 16px; border-radius: 14px; border: 1px dashed var(--line-2);
}
.best b { color: var(--y); font-size: 17px; font-weight: 900; }
.hud {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 14px 22px; background: rgba(0, 0, 0, .28); border-bottom: 1px solid var(--line);
}
.hud-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.chances { --w: 46px; display: inline-flex; direction: rtl; align-items: flex-start; gap: calc(var(--w) * .07); }
.chances.lg { --w: 66px; margin: 16px 0 6px; }
.chances img {
display: block; flex: none; width: var(--w); height: auto;
filter: drop-shadow(0 0 6px rgba(251, 181, 69, .5));
transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease);
}
.chances img.lost { opacity: .18; filter: grayscale(1) brightness(1.4); transform: scale(.94); }
.chances img.dying { animation: burn .75s var(--ease); }
@keyframes burn {
30% { opacity: 1; transform: scale(1.22); filter: sepia(1) saturate(7) hue-rotate(-35deg) drop-shadow(0 0 14px var(--red)); }
}
.hud-right { display: flex; align-items: center; gap: 24px; }
.stat { text-align: center; line-height: 1.2; }
.stat b { display: block; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; transition: color .3s, text-shadow .3s; }
.stat span { font-size: 12px; color: var(--muted); }
.stat.score b { color: var(--y); text-shadow: 0 0 22px rgba(251, 181, 69, .4); }
.stat.hot b { color: var(--flame); text-shadow: 0 0 20px rgba(255, 138, 61, .65); }
.stat.silver b { color: var(--ag); text-shadow: 0 0 18px rgba(207, 216, 224, .35); }
.stat.silver.gain b { animation: bump .5s var(--spring); }
.stage { position: relative; padding: 26px 26px 8px; }
.stage .glow {
position: absolute; inset: 10px; border-radius: 50%; filter: blur(60px);
opacity: .42; transform: scale(.85); pointer-events: none; z-index: 0;
background-size: cover; background-position: center; transition: background-image .5s;
}
.shot { position: relative; z-index: 1; width: min(100%, calc(56vh * 4 / 3), var(--shot-max, 100vh)); margin-inline: auto; }
.shot .frame {
position: relative; border-radius: 8px; overflow: hidden; background: #040303;
width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 236, 200, .08);
}
.shot img {
max-width: 100%; max-height: 100%; object-fit: contain; display: block;
opacity: 0; transform: scale(1.04); filter: blur(6px) saturate(.6);
transition: opacity .6s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.shot img.ready { opacity: 1; transform: none; filter: none; }
.shot .spinner {
position: absolute; width: 30px; height: 30px; border-radius: 50%;
border: 2px solid rgba(255, 236, 200, .1); border-top-color: var(--y); animation: spin .7s linear infinite;
}
.shot .spinner.hide { display: none; }
.shot > b { position: absolute; width: 24px; height: 24px; border: 2px solid var(--y); z-index: 2; filter: drop-shadow(0 0 6px rgba(251, 181, 69, .7)); }
.shot b.tr { top: -9px; right: -9px; border-left: 0; border-bottom: 0; }
.shot b.tl { top: -9px; left: -9px; border-right: 0; border-bottom: 0; }
.shot b.br { bottom: -9px; right: -9px; border-left: 0; border-top: 0; }
.shot b.bl { bottom: -9px; left: -9px; border-right: 0; border-top: 0; }
.qmeta { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; padding: 18px 4px 0; }
.qmeta .q { color: var(--ink-2); font-weight: 700; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 26px 0; }
.opt {
position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
background: linear-gradient(180deg, rgba(255, 240, 215, .055), rgba(255, 240, 215, .02));
border: 1px solid var(--line-2); border-radius: 14px; padding: 15px 16px;
text-align: right; font-size: 17px; font-weight: 600; color: var(--ink);
transition: border-color .18s, background .18s, transform .2s var(--ease), box-shadow .25s, opacity .3s;
}
.opt kbd {
flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
background: rgba(0, 0, 0, .45); border: 1px solid var(--line-2);
font: 700 12px/1 "Pinar", sans-serif; color: var(--muted); transition: all .18s;
}
.opt span { flex: 1; display: flex; flex-direction: column; line-height: 1.45; }
.opt small { font-size: 12px; font-weight: 400; color: var(--muted); direction: ltr; text-align: right; }
.opt:hover:not(:disabled) { border-color: rgba(251, 181, 69, .55); background: rgba(251, 181, 69, .08); transform: translateY(-2px); box-shadow: 0 16px 34px -20px var(--y-glow); }
.opt:hover:not(:disabled) kbd { border-color: var(--y); color: var(--y); }
.opt:disabled { cursor: default; }
.opt.right { border-color: var(--green); background: rgba(78, 211, 140, .13); box-shadow: 0 0 0 1px var(--green), 0 0 34px -8px rgba(78, 211, 140, .6); }
.opt.right kbd { background: var(--green); border-color: var(--green); color: #062313; }
.opt.wrong { border-color: var(--red); background: rgba(255, 107, 87, .13); animation: shake .42s; }
.opt.wrong kbd { background: var(--red); border-color: var(--red); color: #2A0803; }
.opt.dim { opacity: .32; }
@keyframes shake { 20% { transform: translateX(6px); } 45% { transform: translateX(-5px); } 70% { transform: translateX(3px); } }
.feedback { min-height: 58px; padding: 16px 24px 24px; text-align: center; color: var(--ink-2); font-size: 16px; }
.feedback b { color: var(--y-hi); }
.float {
position: fixed; z-index: 30; pointer-events: none; font-weight: 900; font-size: 26px;
color: var(--y-hi); text-shadow: 0 0 18px rgba(251, 181, 69, .8);
animation: floatup 1s var(--ease) forwards;
}
.float.minus { color: var(--red); text-shadow: 0 0 18px rgba(255, 107, 87, .7); }
.float.sec { font-size: 19px; color: var(--y); }
.float.ag { color: var(--ag); text-shadow: 0 0 18px rgba(207, 216, 224, .7); }
@keyframes floatup { to { opacity: 0; transform: translateY(-64px) scale(1.2); } }
.result-hero { position: relative; text-align: center; padding: 38px 24px 8px; }
.result-hero::before {
content: ""; position: absolute; z-index: -1; left: 50%; top: -120px; width: 520px; height: 360px;
transform: translateX(-50%); background: radial-gradient(closest-side, rgba(251, 181, 69, .26), transparent);
}
.medal {
--deg: 0deg;
position: relative; display: grid; place-items: center; width: 138px; height: 138px;
margin: 6px auto 14px; border-radius: 50%;
background: conic-gradient(from 0deg, #FFE3A6, var(--y) calc(var(--deg) * .6), var(--y-deep) var(--deg), rgba(255, 236, 200, .07) 0);
filter: drop-shadow(0 0 26px rgba(251, 181, 69, .35));
transition: --deg 1.4s var(--ease);
}
.medal::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #24201A, #0D0B09 70%); }
.medal .in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.medal small { font-size: 12.5px; color: var(--muted); margin-bottom: -2px; }
.medal em { font-style: normal; font-size: 54px; font-weight: 900; line-height: 1.4; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result-hero .sub { color: var(--muted); font-size: 15px; }
.result-hero .sub b { color: var(--ink); }
.login-note {
max-width: 42ch; margin: 14px auto 0; text-align: center;
font-size: 13.5px; line-height: 1.95; color: var(--muted);
}
.login-note span { display: inline-block; }
.pb.clean { display: inline-flex; align-items: center; gap: 7px; color: #1B1206; background: var(--gold); border-color: transparent; box-shadow: 0 10px 30px -10px var(--y-glow); }
.pb.clean svg { width: 15px; height: 15px; }
.pb {
display: inline-block; margin-top: 12px; padding: 4px 16px; border-radius: 999px;
font-size: 13px; font-weight: 800; color: var(--y-hi);
background: var(--y-soft); border: 1px solid rgba(251, 181, 69, .4); box-shadow: 0 0 24px -8px var(--y-glow);
}
.summary {
display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 24px 24px;
border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(0, 0, 0, .28);
}
.summary div { padding: 16px 8px; text-align: center; }
.summary div + div { border-inline-start: 1px solid var(--line); }
.summary b { display: block; font-size: 30px; font-weight: 900; line-height: 1.25; font-variant-numeric: tabular-nums; }
.summary div:first-child b { color: var(--y); text-shadow: 0 0 22px rgba(251, 181, 69, .35); }
.summary span { font-size: 13px; color: var(--muted); }
.prize {
position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px;
margin: 18px 24px 24px; padding: 18px 22px; border-radius: var(--r-md); border: 1px solid transparent;
background:
linear-gradient(120deg, #2A2116, #17130E 65%) padding-box,
linear-gradient(120deg, rgba(255, 214, 138, .85), rgba(251, 181, 69, .12) 45%, rgba(255, 214, 138, .5)) border-box;
}
.prize::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
background: linear-gradient(100deg, transparent, rgba(255, 226, 160, .14), transparent);
transform: skewX(-20deg); animation: sheen 5s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.prize .ic {
flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
color: #1B1206; background: var(--gold); box-shadow: 0 12px 26px -10px var(--y-glow);
}
.prize .ic svg { width: 24px; height: 24px; }
.prize span { display: block; font-size: 13px; font-weight: 700; color: var(--y); }
.prize b { display: block; font-size: 20px; font-weight: 900; line-height: 1.55; }
.board-head { position: relative; text-align: center; padding: 34px 24px 22px; }
.board-head::before {
content: ""; position: absolute; z-index: -1; left: 50%; top: -140px; width: 480px; height: 300px;
transform: translateX(-50%); background: radial-gradient(closest-side, rgba(251, 181, 69, .2), transparent);
}
.board-head h1 { margin: 0; }
.tbl-wrap {
max-height: 52vh; overflow: auto; border-block: 1px solid var(--line);
scrollbar-width: thin; scrollbar-color: rgba(255, 236, 200, .15) transparent;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--line); font-size: 15px; }
th {
position: sticky; top: 0; z-index: 1; background: #151310;
color: var(--muted); font-weight: 500; font-size: 13px;
}
td { font-variant-numeric: tabular-nums; transition: background .15s; }
td.rk-c { width: 4.5em; }
td.score { font-weight: 800; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 240, 215, .025); }
.rk {
display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px;
font-weight: 800; font-size: 13px; color: var(--muted);
background: rgba(255, 236, 200, .04); border: 1px solid var(--line);
}
.rk.r1 { color: #1B1206; background: var(--gold); border-color: transparent; box-shadow: 0 6px 18px -6px var(--y-glow); }
.rk.r2 { color: #16181B; background: linear-gradient(180deg, #F4F5F7, #A9B0B8); border-color: transparent; }
.rk.r3 { color: #1E0F05; background: linear-gradient(180deg, #F2BE92, #AE6936); border-color: transparent; }
.who-t { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.who-t b { font-weight: 700; }
.who-t .uname { font-size: 12px; font-weight: 400; }
tr.gap td { padding: 2px 16px; text-align: center; color: var(--faint); font-size: 17px; letter-spacing: .45em; }
tr.me td { background: rgba(251, 181, 69, .09); }
tr.me td:first-child { box-shadow: inset -3px 0 0 var(--y); }
tr.me .who-t b, tr.me td.score { color: var(--y-hi); }
.empty { color: var(--muted); text-align: center; padding: 42px 20px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 22px 24px 26px; }
.toast {
position: fixed; z-index: 60; inset-inline: 0; bottom: 28px; margin: auto; width: max-content; max-width: 88vw;
padding: 11px 22px; border-radius: 999px; font-size: 15px; color: var(--ink);
background: rgba(26, 23, 19, .92); border: 1px solid rgba(251, 181, 69, .35);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .85), 0 0 30px -12px var(--y-glow);
animation: toast-in .4s var(--spring) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@media (max-width: 600px) {
header .inner { padding: 8px 14px; min-height: 58px; gap: 10px; }
.brand { gap: 10px; }
.brand img { height: 22px; }
.brand-sep { height: 24px; }
.brand-text b { font-size: 14.5px; }
.brand-text small, .pb-text small { display: none; }
.pbtn { padding: 7px 12px 7px 10px; gap: 9px; }
.pb-text b { max-width: 96px; font-size: 13px; }
.account { position: static; }
.pmenu { inset-inline: 12px; width: auto; top: calc(100% + 8px); }
.wrap { padding: 18px 14px 56px; }
.card { border-radius: 18px; }
.pad { padding: 22px 18px; }
.hero { padding: 34px 18px 22px; }
.intro-hero { padding: 28px 18px 24px; }
.emblem { width: 80px; height: 80px; }
.lede { font-size: 15px; }
.tagline::before, .tagline::after { display: none; }
.frames {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px;
padding-inline: 14px; scrollbar-width: none;
}
.frames::-webkit-scrollbar { display: none; }
.fr { scroll-snap-align: start; }
.rules > div { padding: 22px 10px 20px; }
.rules b { font-size: 44px; }
.start-row { padding: 18px; gap: 10px; }
.start-row .btn.lg { padding-inline: 18px; font-size: 16px; }
.start-row .btn.ghost { padding-inline: 14px; }
.best { font-size: 13px; padding: 8px 10px; }
.hud { padding: 12px 12px; gap: 10px; }
.chances { --w: 36px; }
.chances.lg { --w: 36px; margin-top: 12px; }
.hud-right { gap: 13px; }
.hud-lbl, .stat span { font-size: 11.5px; }
.stat b { font-size: 20px; }
.stat.silver > span:last-child { font-size: 11.5px; }
.stage { padding: 18px 14px 4px; }
.shot { width: min(100%, 48vh, var(--shot-max, 100vh)); }
.shot .frame { aspect-ratio: 1 / 1; }
.options { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 14px; gap: 8px; padding-top: 8px; }
.opt { min-height: 62px; padding: 10px 12px; font-size: 15px; line-height: 1.4; border-radius: 12px; }
.opt span { overflow-wrap: anywhere; }
.opt small { font-size: 11px; line-height: 1.35; margin-top: 2px; }
.opt kbd { display: none; }
.opt:hover:not(:disabled) { transform: none; }
.feedback { padding-inline: 16px; }
.btn, .btn.ghost { flex: 1 1 auto; }
.medal { width: 118px; height: 118px; }
.medal em { font-size: 46px; }
.summary { margin: 20px 14px 20px; }
.summary b { font-size: 24px; }
.prize { margin: 16px 14px 20px; padding: 16px; }
.actions { padding: 18px 14px 20px; }
th, td { padding: 10px; }
}
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.perk { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; }
.perk:nth-child(even) { border-inline-start: 1px solid var(--line); }
.perk:nth-child(n+3) { border-top: 1px solid var(--line); }
.perk .pk-ic {
flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 2px;
border-radius: 10px; color: var(--y); background: var(--y-soft); border: 1px solid rgba(251, 181, 69, .25);
}
.perk .pk-ic svg { width: 19px; height: 19px; stroke-width: 1.6; }
.perk b { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.6; }
.perk div > span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.85; }
.timer { position: relative; height: 3px; background: rgba(255, 236, 200, .05); overflow: hidden; }
.timer > i {
position: absolute; inset: 0; transform-origin: right center;
background: linear-gradient(90deg, rgba(251, 181, 69, .35), var(--y) 40%, var(--y-hi));
box-shadow: 0 0 14px var(--y);
}
@keyframes tag-in { from { opacity: 0; transform: translateY(-6px) scale(.9); } }
.lvl-up {
position: absolute; z-index: 4; left: 50%; bottom: 16px; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
padding: 7px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--y-hi);
background: rgba(10, 9, 7, .82); border: 1px solid rgba(251, 181, 69, .55);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 0 30px -6px var(--y-glow);
animation: lvl-in 2.6s var(--ease) both;
}
.lvl-up svg { width: 16px; height: 16px; }
@keyframes lvl-in {
0% { opacity: 0; transform: translate(-50%, 14px) scale(.9); }
12%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
100% { opacity: 0; transform: translate(-50%, -8px) scale(.98); }
}
.qmeta { align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.qhead { display: flex; align-items: center; gap: 10px; }
.clues { flex-basis: 100%; }
.lvl {
display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 12px; border-radius: 999px;
font-size: 12.5px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-2); background: rgba(0, 0, 0, .25);
}
.lvl .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.lvl .bars i { width: 3px; border-radius: 1px; background: rgba(255, 236, 200, .18); }
.lvl .bars i:nth-child(1) { height: 5px; }
.lvl .bars i:nth-child(2) { height: 8px; }
.lvl .bars i:nth-child(3) { height: 12px; }
.lvl .bars i.on { background: var(--y); box-shadow: 0 0 6px var(--y-glow); }
.lvl.bump { animation: bump .7s var(--spring); border-color: rgba(251, 181, 69, .6); }
@keyframes bump { 40% { transform: scale(1.15); } }
.options.n3 .opt:last-child { grid-column: 1 / -1; }
.opt.gone {
opacity: .22; filter: grayscale(1); transform: scale(.98); pointer-events: none;
border-style: dashed; background: transparent; box-shadow: none;
}
.opt.gone span { text-decoration: line-through; text-decoration-color: rgba(255, 236, 200, .4); }
.feedback .fb-ok { color: var(--green); font-weight: 800; margin-inline-end: 4px; }
.feedback .pill {
display: inline-flex; align-items: center; gap: 4px; margin: 3px 4px; padding: 1px 12px; border-radius: 999px;
font-size: 13.5px; font-weight: 800; color: var(--ink); background: rgba(255, 240, 215, .06); border: 1px solid var(--line-2);
}
.feedback .pill.speed { color: var(--y-hi); border-color: rgba(251, 181, 69, .45); background: var(--y-soft); }
.feedback .pill.speed svg { width: 14px; height: 14px; }
.feedback .pill.gold { color: #1B1206; background: var(--gold); border-color: transparent; box-shadow: 0 6px 18px -6px var(--y-glow); }
body.locked { overflow: hidden; }
.overlay {
position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
background: rgba(5, 4, 3, .76); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
animation: fade .25s ease both;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
width: min(100%, 640px); max-height: calc(100dvh - 32px); overflow: auto;
text-align: center; padding: 30px 26px 24px; animation: sheet-in .45s var(--spring) both;
border: 1px solid rgba(251, 181, 69, .22);
}
.sheet::before { display: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.sheet h2 { font-size: clamp(22px, 4.6vw, 30px); font-weight: 800; line-height: 1.6; margin: 0 0 4px; }
.sheet .lede { font-size: 15px; margin-bottom: 0; }
.sheet .x {
position: absolute; z-index: 6; top: 14px; left: 14px; width: 36px; height: 36px; display: grid; place-items: center;
border-radius: 50%; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .35); color: var(--ink-2);
}
.sheet .x:hover { color: var(--ink); border-color: rgba(251, 181, 69, .5); }
.mirror-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 12px; margin: 20px 0 22px; }
.mirror-grid.n1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.mirror-grid figure {
position: relative; margin: 0; min-height: 180px;
display: flex; align-items: center; justify-content: center;
}
.mirror-grid figure.loaded { min-height: 0; }
.mirror-grid figure::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
border-radius: 50%; border: 2px solid rgba(255, 236, 200, .1); border-top-color: var(--y); animation: spin .7s linear infinite;
}
.mirror-grid figure.loaded::after { display: none; }
.mirror-grid img {
display: block; width: auto; height: auto; max-width: 100%; max-height: min(52vh, 440px);
border-radius: 8px; background: #040303;
box-shadow: 0 0 0 1px var(--line-2), 0 24px 50px -24px #000;
opacity: 0; transform: scale(1.04); filter: blur(6px);
transition: opacity .6s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
}
.mirror-grid figure.loaded img { opacity: 1; transform: none; filter: none; }
.mirror-grid figure:nth-child(2) img { transition-delay: .12s; }
.mirror-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
.mirror-hint svg { color: var(--y); width: 16px; height: 16px; }
.sheet .btn.wide { width: 100%; }
#leave .leave-sheet { width: min(100%, 430px); text-align: center; }
#leave .leave-sheet .lede { font-size: 15px; margin-top: 4px; }
#leave .form-actions { display: flex; gap: 10px; margin-top: 22px; }
#leave .form-actions .btn { flex: 1; padding-inline: 12px; white-space: nowrap; }
.story-sheet { width: min(100%, 440px); }
.story-prev {
width: min(100%, 300px, calc((100dvh - 290px) * 9 / 16)); aspect-ratio: 9 / 16; margin: 16px auto 18px;
border-radius: 18px; overflow: hidden; background: #000;
box-shadow: 0 0 0 1px var(--line-2), 0 30px 70px -24px #000, 0 0 60px -30px var(--y-glow);
}
.story-prev img { width: 100%; height: 100%; display: block; object-fit: cover; }
.story-sheet .form-actions .btn { flex: 1 1 0; padding-inline: 12px; font-size: 15px; white-space: nowrap; }
.r-speed {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px;
margin: -8px 24px 20px; font-size: 14px; color: var(--muted);
}
.r-speed .linkbtn { flex: none; }
.r-speed b { color: var(--y-hi); }
.r-speed svg { width: 15px; height: 15px; color: var(--y); }
@media (max-width: 600px) {
.perks { grid-template-columns: 1fr; }
.perk { padding: 14px 18px; }
.perk:nth-child(even) { border-inline-start: 0; }
.perk:nth-child(n+2) { border-top: 1px solid var(--line); }
.qmeta { padding-top: 16px; }
.lvl-up { font-size: 13px; padding: 6px 14px; }
.sheet { padding: 26px 16px 18px; }
.mirror-grid { gap: 8px; }
.mirror-grid img { max-height: 34vh; }
}
.account { display: flex; align-items: center; gap: 10px; }
.snd {
flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
color: var(--y); background: rgba(255, 240, 215, .04); border: 1px solid var(--line-2);
transition: color .2s, border-color .2s, background .2s, box-shadow .25s;
}
.snd:hover { border-color: rgba(251, 181, 69, .5); box-shadow: 0 0 0 4px rgba(251, 181, 69, .08); }
.snd svg { width: 18px; height: 18px; stroke-width: 1.8; }
.snd[aria-pressed="false"] { color: var(--muted); }
.pm-item .badge {
margin-inline-start: auto; padding: 0 9px; border-radius: 999px; line-height: 1.75;
font-size: 12px; font-weight: 800; color: var(--y-hi); background: var(--y-soft); border: 1px solid rgba(251, 181, 69, .3);
}
.memory { display: none; position: relative; z-index: 1; }
.memory-mode .memory {
display: flex; flex-direction: column; justify-content: center;
min-height: calc(100dvh - 300px); animation: rise .5s var(--ease) both;
}
.memory-mode .shot, .memory-mode .qmeta, .memory-mode .options, .memory-mode .kitbar, .memory-mode .bb { display: none; }
.mem-head { text-align: center; margin: 4px 0 18px; }
.mem-head .eyebrow { margin-bottom: 4px; }
.mem-head h2 { margin: 0; font-size: clamp(26px, 5.4vw, 36px); font-weight: 900; line-height: 1.45; }
.mem-head p { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); }
.mem-head p b { color: var(--y-hi); font-weight: 800; white-space: nowrap; }
.mem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 600px; margin: 0 auto; }
.mem-pick { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; background: none; transition: transform .25s var(--ease), opacity .4s; }
.mem-frame {
position: relative; display: block; aspect-ratio: 4 / 5; max-height: 46vh; width: 100%; overflow: hidden; border-radius: 12px; background: #040303;
box-shadow: 0 0 0 1px var(--line-2), 0 24px 50px -24px #000; transition: box-shadow .25s;
}
.mem-frame::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
border-radius: 50%; border: 2px solid rgba(255, 236, 200, .1); border-top-color: var(--y); animation: spin .7s linear infinite;
}
.mem-pick.ready .mem-frame::after { display: none; }
.mem-frame img {
width: 100%; height: 100%; display: block; object-fit: cover;
opacity: 0; transform: scale(1.06); filter: blur(8px) saturate(.5);
transition: opacity .6s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
}
.mem-pick.ready img { opacity: 1; transform: none; filter: none; }
.mem-pick kbd {
position: absolute; z-index: 2; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center;
border-radius: 8px; color: #fff; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .18);
font: 800 13px/1 "Pinar", sans-serif; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mem-pick:hover:not(:disabled) { transform: translateY(-3px); }
.mem-pick:hover:not(:disabled) .mem-frame { box-shadow: 0 0 0 2px var(--y), 0 24px 50px -20px var(--y-glow); }
.mem-pick:disabled { cursor: default; }
.mem-tag {
position: absolute; z-index: 2; left: 50%; bottom: 12px; white-space: nowrap; opacity: 0;
transform: translate(-50%, 8px); padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 800;
transition: opacity .35s, transform .45s var(--spring);
}
.mem-pick.seen .mem-tag, .mem-pick.fresh .mem-tag { opacity: 1; transform: translate(-50%, 0); }
.mem-pick.seen .mem-tag { color: #062313; background: var(--green); box-shadow: 0 8px 24px -8px rgba(78, 211, 140, .7); }
.mem-pick.fresh .mem-tag { color: var(--ink); background: rgba(0, 0, 0, .7); border: 1px solid var(--line-2); }
.mem-pick.seen .mem-frame { box-shadow: 0 0 0 2px var(--green), 0 0 44px -10px rgba(78, 211, 140, .6); }
.mem-pick.wrong .mem-frame { box-shadow: 0 0 0 2px var(--red); animation: shake .42s; }
.mem-pick.fresh:not(.wrong) { opacity: .5; }
.cam-flash { position: fixed; inset: 0; z-index: 65; pointer-events: none; background: #FFF6E4; animation: cam-flash .6s ease-out forwards; }
@keyframes cam-flash { 0% { opacity: 0; } 7% { opacity: .7; } 100% { opacity: 0; } }
.card-sheet { width: min(100%, 470px); overflow-x: hidden; }
.card-stage { position: relative; }
.card-stage::before {
content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px;
background: repeating-conic-gradient(from 0deg, rgba(251, 181, 69, .13) 0 7deg, transparent 7deg 20deg);
-webkit-mask: radial-gradient(closest-side, #000 20%, transparent 72%); mask: radial-gradient(closest-side, #000 20%, transparent 72%);
animation: spin 40s linear infinite; pointer-events: none;
}
.pcard { --w: 250px; position: relative; z-index: 1; width: var(--w); aspect-ratio: 5 / 7; margin: 18px auto 12px; perspective: 1400px; }
.pcard-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--spring); }
.pcard.flipped .pcard-in { transform: rotateY(180deg); }
.pc-face {
position: absolute; inset: 0; border-radius: 16px; padding: 3px;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
background: linear-gradient(135deg, #FFE7B0, #D9921F 28%, #FFF1C9 50%, #B87414 72%, #FFE3A6);
box-shadow: 0 34px 70px -24px #000, 0 0 70px -24px var(--y-glow);
}
.pc-front { transform: rotateY(180deg); }
.pc-inner { position: relative; width: 100%; height: 100%; border-radius: 13px; overflow: hidden; background: #100E0B; display: flex; flex-direction: column; }
.pc-back .pc-inner {
align-items: center; justify-content: center; gap: 10px;
background:
radial-gradient(circle at 50% 42%, rgba(251, 181, 69, .22), transparent 60%),
repeating-linear-gradient(45deg, rgba(255, 236, 200, .025) 0 2px, transparent 2px 9px), #100E0B;
}
.pc-back .pc-inner::before, .pc-back .pc-inner::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='20'%3E%3Crect x='3' y='6' width='8' height='9' rx='2' fill='%23F5EEE1' fill-opacity='.12'/%3E%3C/svg%3E") repeat-y;
}
.pc-back .pc-inner::before { left: 4px; }
.pc-back .pc-inner::after { right: 4px; }
.pc-back svg { width: 38%; aspect-ratio: 1; color: var(--y); filter: drop-shadow(0 0 12px rgba(251, 181, 69, .55)); }
.pc-back b { font-size: 18px; font-weight: 900; color: var(--ink); }
.pc-back small { font-size: 12px; color: var(--muted); }
.pc-photo { position: relative; flex: 1 1 auto; min-height: 0; background: #000; }
.pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-photo::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(16, 14, 11, .95)); }
.pc-no {
position: absolute; z-index: 1; top: 10px; right: 10px; padding: 0 9px; border-radius: 999px; line-height: 1.8;
font-size: 11.5px; font-weight: 800; color: #1B1206; background: var(--gold);
}
.pc-mark { position: absolute; z-index: 1; top: 9px; left: 10px; width: 22px; height: 22px; color: #FFE3A6; filter: drop-shadow(0 1px 4px #000); }
.pc-body { position: relative; z-index: 1; padding: 0 14px 14px; margin-top: -30px; text-align: center; }
.pc-body b { display: block; font-size: 20px; font-weight: 900; line-height: 1.45; color: #fff; }
.pc-body small { display: block; font-size: 11.5px; color: var(--muted); direction: ltr; }
.pc-sign {
display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding-top: 9px;
border-top: 1px solid rgba(251, 181, 69, .3); font-size: 12px; color: var(--ink-2);
}
.pc-sign bdi { color: var(--y-hi); font-weight: 700; }
.pc-date { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.pc-shine {
position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 13px; mix-blend-mode: screen; opacity: 0;
background: linear-gradient(115deg, transparent 32%, rgba(255, 235, 190, .38) 46%, rgba(190, 230, 255, .18) 52%, transparent 66%);
background-size: 260% 100%;
}
.pcard.flipped .pc-shine { opacity: 1; animation: holo 3.4s ease-in-out .7s infinite; }
@keyframes holo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
.card-count { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.card-count b { color: var(--y-hi); }
.album-hero { padding-bottom: 24px; }
.album-meter { max-width: 420px; margin: 18px auto 0; }
.am-num { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.am-num b { font-size: 48px; font-weight: 900; line-height: 1.4; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-num span { font-size: 15px; color: var(--muted); }
.am-num em { font-style: normal; font-weight: 800; color: var(--ink-2); }
.am-bar { height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 236, 200, .08); }
.am-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--y-deep), var(--y-hi)); box-shadow: 0 0 14px var(--y); transition: width 1.1s var(--ease); }
.album-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 18px 20px; border-top: 1px solid var(--line); }
.tab {
padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-2);
background: rgba(255, 240, 215, .04); border: 1px solid var(--line-2); transition: background .2s, color .2s;
}
.tab:hover { border-color: rgba(251, 181, 69, .45); }
.tab[aria-selected="true"] { color: #1B1206; background: var(--gold); border-color: transparent; }
.tab em { font-style: normal; margin-inline-start: 5px; opacity: .7; }
.album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 4px 24px 12px; }
.acard {
position: relative; aspect-ratio: 5 / 7; border-radius: 12px; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; text-align: center;
background: linear-gradient(180deg, #19160F, #100E0B); border: 1px solid var(--line); color: var(--ink);
animation: rise .5s var(--ease) both;
}
.acard .ac-no { position: absolute; top: 8px; right: 10px; font-size: 11px; font-weight: 800; color: var(--muted); }
.acard.have {
padding: 2px; border: 0; cursor: pointer;
background: linear-gradient(135deg, #FFE7B0, #D9921F 28%, #FFF1C9 50%, #B87414 72%, #FFE3A6);
transition: transform .3s var(--ease), box-shadow .3s;
}
.acard.have:hover, .acard.have:focus-visible { transform: translateY(-4px) rotate(-1.2deg); box-shadow: 0 22px 44px -18px var(--y-glow); }
.ac-in { position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #000; }
.ac-in img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ac-in::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .92)); }
.acard.have .ac-no { z-index: 2; top: 8px; right: 8px; padding: 0 7px; border-radius: 999px; line-height: 1.7; color: #1B1206; background: var(--gold); }
.ac-name { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; font-size: 13.5px; font-weight: 800; line-height: 1.45; color: #fff; }
.acard.near .ac-ic { width: 34px; height: 34px; margin-bottom: 10px; color: rgba(251, 181, 69, .45); }
.acard.near b { font-size: 13.5px; font-weight: 800; line-height: 1.5; }
.acard.near small { margin-top: 2px; font-size: 11px; color: var(--muted); direction: ltr; }
.ac-bar { display: block; width: 78%; height: 4px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 236, 200, .12); }
.ac-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--y-deep), var(--y-hi)); box-shadow: 0 0 6px var(--y-glow); }
.ac-count { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--y-hi); }
.acard.unknown { border-style: dashed; }
.acard.unknown .ac-q { font-size: 42px; font-weight: 900; line-height: 1.3; color: rgba(255, 236, 200, .14); }
.acard.unknown small { font-size: 11.5px; color: var(--faint); }
.album-empty { grid-column: 1 / -1; padding: 34px 10px; text-align: center; color: var(--muted); }
.r-notes { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -8px 24px 20px; }
.r-notes .r-speed { margin: 0; }
.linkbtn { padding: 0 4px; border: 0; background: none; font-size: 14px; font-weight: 800; color: var(--y); text-decoration: underline; text-underline-offset: 5px; }
.feedback .pill.card { color: var(--ink-2); }
.feedback .pill.card svg { width: 14px; height: 14px; color: var(--y); }
@media (max-width: 600px) {
.account { gap: 8px; }
.snd { width: 34px; height: 34px; }
.snd svg { width: 16px; height: 16px; }
.mem-grid { gap: 8px; }
.mem-head { margin-bottom: 14px; }
.mem-head p { font-size: 14px; }
.pcard { --w: min(230px, 62vw); }
.album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 14px 8px; }
.album-tabs { padding: 14px; }
.ac-name { left: 5px; right: 5px; bottom: 6px; font-size: 11.5px; }
.acard { padding: 6px; }
.acard .ac-no { font-size: 10px; right: 7px; top: 6px; }
.acard.near b { font-size: 11.5px; }
.acard.near small { display: none; }
.acard.near .ac-ic { width: 24px; height: 24px; margin-bottom: 6px; }
.ac-count { font-size: 10.5px; }
.acard.unknown .ac-q { font-size: 32px; }
.acard.unknown small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cam-flash { display: none; } }
.fever-veil, .safe-veil { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease); }
.fever-veil {
background:
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 238, 196, .24), transparent 70%),
radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(255, 168, 56, .16));
mix-blend-mode: screen;
}
body.fever .fever-veil { opacity: 1; animation: fever-breathe 1.6s ease-in-out infinite; }
@keyframes fever-breathe { 50% { opacity: .68; } }
body.fever .shot .frame { box-shadow: 0 0 0 2px rgba(255, 214, 138, .9), 0 0 64px -6px rgba(255, 186, 72, .85), 0 34px 80px -24px #000; }
body.fever .shot .frame::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
background: radial-gradient(ellipse at 50% 35%, rgba(255, 244, 214, .26), transparent 66%);
animation: fever-breathe 1.6s ease-in-out infinite;
}
body.fever .shot img.ready { filter: brightness(1.1) contrast(1.06) saturate(1.08); }
body.fever .shot > b { border-color: #FFE7B0; filter: drop-shadow(0 0 10px #FFB020); }
body.fever .timer { height: 5px; }
body.fever .timer > i {
background: linear-gradient(90deg, #FF4D1A, #FF9F1C, #FFF1B8, #FF9F1C, #FF4D1A); background-size: 200% 100%;
box-shadow: 0 0 18px #FF8A3D, 0 0 5px #FFE3A6; animation: flame .7s linear infinite;
}
@keyframes flame { to { background-position: -200% 0; } }
.cam-flash.gold { background: #FFE2A0; }
.mode-tag {
position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
padding: 6px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 800;
}
.mode-tag svg { width: 16px; height: 16px; }
.mode-tag em { font-style: normal; font-weight: 700; opacity: .75; }
.mode-tag.fire {
color: #1B1206; background: linear-gradient(90deg, #FFE3A6, #FFB020, #FFF1B8, #FFB020, #FFE3A6); background-size: 200% 100%;
box-shadow: 0 0 28px rgba(255, 170, 50, .8); animation: tag-in .5s var(--spring) both, flame 1.6s linear infinite;
}
.mode-tag.red {
color: #FFDCD7; background: rgba(38, 4, 3, .84); border: 1px solid rgba(229, 57, 45, .7);
box-shadow: 0 0 28px -4px rgba(229, 57, 45, .75); animation: tag-in .5s var(--spring) both;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mode-tag.red svg { color: #FF5A4E; }
.mode-tag .rp { display: inline-flex; gap: 4px; margin-inline-start: 2px; }
.mode-tag .rp i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 200, 190, .22); transition: background .3s, box-shadow .3s; }
.mode-tag .rp i.on { background: #FF5A4E; box-shadow: 0 0 8px #FF5A4E; }
body.fever .lvl-up, body.safelight .lvl-up { bottom: 58px; }
.feedback .pill.fire { color: #1B1206; background: linear-gradient(90deg, #FFB020, #FFE3A6); border-color: transparent; box-shadow: 0 0 18px rgba(255, 170, 50, .6); }
.feedback .pill.red { color: #FFDCD7; background: rgba(229, 57, 45, .16); border-color: rgba(229, 57, 45, .55); }
.feedback .fb-line { display: block; margin-top: 4px; font-size: 14px; color: #FF8A7E; }
.safe-veil {
background:
radial-gradient(ellipse 72% 58% at 50% 45%, transparent 38%, rgba(150, 10, 6, .42) 100%),
linear-gradient(rgba(120, 6, 4, .10), rgba(120, 6, 4, .10));
}
body.safelight .safe-veil { opacity: 1; animation: heartbeat 1.15s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { opacity: .8; } 12% { opacity: 1; } 24% { opacity: .86; } 36% { opacity: 1; } }
body.safelight {
--y: #E5392D; --y-hi: #FF8A7E; --y-deep: #B3261E; --y-soft: rgba(229, 57, 45, .12); --y-glow: rgba(229, 57, 45, .55);
--gold: linear-gradient(180deg, #FFB3A8 0%, #E5392D 50%, #8F160F 100%);
background:
radial-gradient(1100px 640px at 50% -10%, rgba(210, 25, 15, .32), transparent 62%),
radial-gradient(900px 560px at 50% 110%, rgba(150, 10, 6, .30), transparent 60%),
#0C0605;
}
body.safelight .leak { background: radial-gradient(closest-side, #E5392D, transparent); }
body.safelight .card::before { background: linear-gradient(155deg, rgba(229, 57, 45, .6), rgba(255, 200, 190, .06) 30%, rgba(255, 200, 190, .05) 70%, rgba(229, 57, 45, .3)); }
body.safelight .shot > b { border-color: #FF5A4E; filter: drop-shadow(0 0 8px #E5392D); }
body.safelight .timer > i { background: linear-gradient(90deg, rgba(229, 57, 45, .4), #E5392D 40%, #FF8A7E); box-shadow: 0 0 14px #E5392D; }
body.safelight .chances img:not(.lost) {
filter: sepia(1) saturate(6) hue-rotate(-45deg) brightness(.95) drop-shadow(0 0 10px rgba(229, 57, 45, .9));
animation: heart-piece 1.15s ease-in-out infinite;
}
@keyframes heart-piece { 12% { transform: scale(1.1); } 36% { transform: scale(1.06); } }
.chances img.revive { animation: revive 1.2s var(--spring); }
@keyframes revive {
0% { transform: scale(.4); opacity: .2; filter: brightness(3) drop-shadow(0 0 20px #FFE3A6); }
55% { transform: scale(1.4); opacity: 1; filter: brightness(1.7) drop-shadow(0 0 24px #FFB020); }
}
.goals {
margin: 0 24px 22px; padding: 16px 18px; border-radius: var(--r-md);
background: linear-gradient(120deg, rgba(251, 181, 69, .11), rgba(251, 181, 69, .02) 65%);
border: 1px solid rgba(251, 181, 69, .32);
}
.goals-kicker { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: var(--y); }
.goals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.goals li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.goals li svg { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--y); }
.goals li b { color: var(--ink); font-weight: 800; }
.goals li bdi { color: var(--y-hi); font-weight: 800; }
.whats { display: flex; justify-content: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.whats-btn {
display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px;
font-size: 15px; font-weight: 800; color: var(--y-hi);
background: linear-gradient(90deg, rgba(251, 181, 69, .15), rgba(251, 181, 69, .05));
border: 1px solid rgba(251, 181, 69, .4); transition: background .2s, box-shadow .25s;
}
.whats-btn svg { width: 18px; height: 18px; color: var(--y); }
.whats-btn .chev { width: 14px; height: 14px; color: var(--muted); transition: transform .25s var(--ease); }
.whats-btn:hover { background: rgba(251, 181, 69, .2); box-shadow: 0 12px 30px -14px var(--y-glow); }
.whats-btn:hover .chev { transform: translateX(-4px); }
.features-sheet { width: min(100%, 760px); padding: 30px 22px 22px; }
#features { align-items: start; overflow-y: auto; overscroll-behavior: contain; }
#features .features-sheet { max-height: none; overflow: visible; margin-block: auto; }
.features-sheet .perks { margin: 20px 0 20px; text-align: right; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: rgba(0, 0, 0, .18); }
.features-sheet .perks { border-bottom: 1px solid var(--line); }
@media (max-width: 600px) {
.goals { margin: 0 14px 18px; padding: 14px; }
.goals li { font-size: 14px; }
.mode-tag { font-size: 12.5px; padding: 5px 12px; bottom: 10px; }
.mode-tag em { display: none; }
body.fever .lvl-up, body.safelight .lvl-up { bottom: 50px; }
.features-sheet { padding: 26px 14px 16px; }
}
.sp-intro {
position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px;
background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(28, 22, 13, .84), rgba(8, 7, 5, .95));
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
animation: spi-bg var(--spi, 1.6s) ease both;
}
@keyframes spi-bg { 0% { opacity: 0; } 12%, 84% { opacity: 1; } 100% { opacity: 0; } }
.spi-in { max-width: 430px; text-align: center; animation: spi-in var(--spi, 1.6s) var(--ease) both; }
@keyframes spi-in { 0% { opacity: 0; transform: scale(.9) translateY(10px); } 16%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.04); } }
.spi-in .eyebrow { margin-bottom: 8px; }
.spi-ic {
display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 10px; border-radius: 20px;
color: #1B1206; background: var(--gold); box-shadow: 0 18px 44px -12px var(--y-glow), inset 0 1px 0 rgba(255, 255, 255, .5);
animation: spi-pop .7s var(--spring) .1s both;
}
@keyframes spi-pop { from { opacity: 0; transform: scale(.4) rotate(-14deg); } }
.spi-ic svg { width: 34px; height: 34px; stroke-width: 1.8; }
.spi-in b { display: block; font-size: clamp(30px, 6vw, 42px); font-weight: 900; line-height: 1.45; }
.spi-in p { margin: 4px 0 0; font-size: 15px; line-height: 1.95; color: var(--ink-2); text-wrap: balance; }
.sp-intro.hold { animation: fade .3s ease both; transition: opacity .28s ease; }
.sp-intro.hold .spi-in { animation: spi-hold .55s var(--ease) both; }
@keyframes spi-hold { from { opacity: 0; transform: scale(.92) translateY(12px); } }
.sp-intro.leaving { opacity: 0; }
.spi-go { margin-top: 18px; min-width: 190px; }
.shot .frame canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }
.shot.fx #photo { display: none; }
.sp-chip {
position: absolute; z-index: 3; top: 12px; left: 12px;
display: inline-flex; align-items: center; gap: 7px; padding: 3px 6px 3px 12px; border-radius: 999px;
font-size: 12.5px; font-weight: 800; color: #1B1206; background: var(--gold);
box-shadow: 0 8px 22px -8px var(--y-glow); animation: tag-in .5s var(--spring) both;
}
.sp-chip svg { width: 15px; height: 15px; }
.sp-chip em {
font-style: normal; padding: 0 9px; border-radius: 999px; line-height: 1.75;
font-size: 12px; font-weight: 900; color: var(--y-hi); background: rgba(27, 18, 6, .88);
}
.sp-chip em.drop { animation: bump .6s var(--spring); }
.shot.developing .frame::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
linear-gradient(110deg, transparent 35%, rgba(255, 226, 170, .10) 48%, transparent 62%),
radial-gradient(ellipse 90% 80% at 50% 45%, rgba(251, 160, 50, .05), rgba(80, 30, 0, .40));
background-size: 260% 100%, 100% 100%;
animation: tray 3.4s ease-in-out infinite;
}
@keyframes tray { 0%, 100% { background-position: 115% 0, 0 0; } 50% { background-position: -15% 0, 0 0; } }
.nameq { display: none; position: relative; z-index: 1; text-align: center; padding: 8px 0 2px; }
.name-mode .nameq { display: block; }
.name-mode .shot, .name-mode .kitbar { display: none; }
.name-mode .qmeta { display: none; }
.nm-plate {
display: inline-block; min-width: min(100%, 320px); padding: 26px 34px; border-radius: 20px;
background: linear-gradient(180deg, rgba(255, 240, 215, .06), rgba(255, 240, 215, .015));
border: 1px solid var(--line-2); box-shadow: 0 30px 70px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .04);
animation: rise .45s var(--ease) both;
}
.nm-plate .eyebrow { display: block; margin-bottom: 10px; }
.nm-plate b {
display: block; font-size: clamp(28px, 6.4vw, 44px); font-weight: 900; line-height: 1.45; color: var(--ink);
text-shadow: 0 0 44px rgba(251, 181, 69, .22);
}
.nm-sub { display: block; margin-top: 4px; font-size: 14.5px; letter-spacing: .04em; color: var(--muted); }
.options.pics { grid-template-columns: 1fr 1fr; }
.opt.pic { flex-direction: column; align-items: stretch; gap: 0; padding: 8px; }
.opt.pic .pic-img {
display: grid; place-items: center; width: 100%; height: clamp(150px, 30vh, 250px);
border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .4);
}
.opt.pic img {
max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
opacity: 0; transform: scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.opt.pic img.ready { opacity: 1; transform: none; }
.opt.pic kbd { position: absolute; z-index: 2; top: 14px; inset-inline-end: 14px; }
@media (max-width: 600px) {
.nm-plate { padding: 20px 22px; }
.opt.pic { padding: 6px; }
.opt.pic .pic-img { height: clamp(120px, 24vh, 190px); }
}
.bb {
position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 18px;
background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(28, 22, 13, .88), rgba(8, 7, 5, .96));
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
animation: fade .25s ease both;
}
.bb-in { position: relative; max-width: 420px; text-align: center; animation: spi-hold .45s var(--ease) both; }
.bb-in .eyebrow { margin-bottom: 8px; }
.bb-in b { display: block; font-size: clamp(24px, 5.2vw, 34px); font-weight: 900; line-height: 1.5; }
.bb-in p { margin: 10px 0 0; font-size: 16px; line-height: 1.9; color: var(--ink-2); text-wrap: balance; }
.bb-in p b { display: inline; font-size: inherit; color: var(--y-hi); }
.bb-in #bb-keep b { color: var(--y-hi); }
.bb-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.bb-row .btn { min-width: 168px; }
.bb-row .btn.ghost { min-width: 0; padding-inline: 18px; }
.bb-bar {
display: block; height: 3px; margin: 16px auto 0; width: min(280px, 80%); border-radius: 99px;
background: var(--gold); transform-origin: right center; box-shadow: 0 0 12px var(--y-glow);
}
@media (max-width: 600px) {
.bb-row { flex-direction: column-reverse; gap: 8px; }
.bb-row .btn { width: 100%; min-width: 0; }
}
.timer.steps { height: 4px; }
.timer.steps::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(90deg, transparent calc(33.333% - 1px), var(--bg-2) 0 calc(33.333% + 1px), transparent 0 calc(66.666% - 1px), var(--bg-2) 0 calc(66.666% + 1px), transparent 0);
}
.special { display: none; position: relative; z-index: 1; }
.special-mode .special { display: block; animation: rise .5s var(--ease) both; }
.special-mode .shot, .special-mode .qmeta, .special-mode .options, .special-mode .kitbar { display: none; }
.sp-grid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 820px; margin: 0 auto; }
.sp-row { display: flex; justify-content: center; gap: 12px; max-width: 100%; }
.sp-grid.pending { min-height: 240px; }
.sp-grid.pending .sp-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sp-grid.pending::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
border-radius: 50%; border: 2px solid rgba(255, 236, 200, .1); border-top-color: var(--y); animation: spin .7s linear infinite;
}
.sp-pick { position: relative; flex: none; display: block; padding: 0; border: 0; border-radius: 10px; background: none; transition: transform .25s var(--ease), opacity .4s; }
.sp-frame {
position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: #040303;
box-shadow: 0 0 0 1px var(--line-2), 0 24px 50px -24px #000; transition: box-shadow .25s;
}
.sp-frame::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
border-radius: 50%; border: 2px solid rgba(255, 236, 200, .1); border-top-color: var(--y); animation: spin .7s linear infinite;
}
.sp-pick.ready .sp-frame::after { display: none; }
.sp-frame img {
width: 100%; height: 100%; display: block; object-fit: cover;
opacity: 0; transform: scale(1.06); filter: blur(8px) saturate(.5);
transition: opacity .6s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
}
.sp-pick.ready img { opacity: 1; transform: none; filter: none; }
.sp-pick kbd {
position: absolute; z-index: 2; top: 9px; right: 9px; width: 26px; height: 26px; display: grid; place-items: center;
border-radius: 8px; color: #fff; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .18);
font: 800 12.5px/1 "Pinar", sans-serif; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: all .2s;
}
.sp-pick:hover:not(:disabled) { transform: translateY(-3px); }
.sp-pick:hover:not(:disabled) .sp-frame { box-shadow: 0 0 0 2px rgba(251, 181, 69, .7), 0 24px 50px -20px var(--y-glow); }
.sp-pick:disabled { cursor: default; }
.sp-pick.sel { transform: translateY(-3px); }
.sp-pick.sel .sp-frame { box-shadow: 0 0 0 3px var(--y), 0 0 44px -8px var(--y-glow); }
.sp-pick.sel kbd { color: #1B1206; background: var(--gold); border-color: transparent; }
.sp-name {
position: absolute; z-index: 2; left: 50%; bottom: 10px; max-width: calc(100% - 16px);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px);
padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
color: var(--ink); background: rgba(0, 0, 0, .74); border: 1px solid var(--line-2);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
transition: opacity .35s, transform .45s var(--spring);
}
.sp-pick.named .sp-name { opacity: 1; transform: translate(-50%, 0); }
.sp-pick.key .sp-frame { box-shadow: 0 0 0 3px var(--green), 0 0 44px -10px rgba(78, 211, 140, .6); }
.sp-pick.key .sp-name { color: #062313; background: var(--green); border-color: transparent; }
.sp-pick.miss .sp-frame { box-shadow: 0 0 0 3px var(--red); animation: shake .42s; }
.sp-pick.rest { opacity: .6; }
.feedback .fb-line.note { color: var(--ink-2); }
.feedback .fb-line.note b { color: var(--y-hi); }
.rsec { padding: 24px; border-top: 1px solid var(--line); }
.rsec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rsec-ic {
flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
color: var(--y); background: var(--y-soft); border: 1px solid rgba(251, 181, 69, .28);
}
.rsec-ic svg { width: 19px; height: 19px; }
.rsec-head > div { flex: 1; min-width: 0; }
.rsec-kicker { display: block; font-size: 12.5px; font-weight: 800; color: var(--y); }
.rsec-head b { display: block; font-size: 19px; font-weight: 900; line-height: 1.5; }
.rsec-head small { font-size: 13px; font-weight: 600; color: var(--muted); margin-inline-start: 8px; }
.rsec-note { flex: none; font-size: 13px; color: var(--muted); }
.rsec-note b { display: inline; font-size: inherit; font-weight: 900; color: var(--y-hi); }
#s-result .tbl-wrap { max-height: none; overflow: visible; }
#s-result .actions { border-top: 1px solid var(--line); justify-content: center; }
#s-result .actions #btn-again { flex: 1 1 100%; }
#s-result .actions .ghost { flex: 1 1 0; min-width: 0; padding-inline: 14px; font-size: 15px; white-space: nowrap; }
.contact.rsec { margin: 0; }
.ct-link {
display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px;
font-size: 13.5px; font-weight: 800; color: var(--y-hi);
background: var(--y-soft); border: 1px solid rgba(251, 181, 69, .35); transition: background .2s, box-shadow .25s;
}
.ct-link:hover { background: rgba(251, 181, 69, .18); box-shadow: 0 10px 26px -14px var(--y-glow); }
.ct-link svg { width: 15px; height: 15px; color: #FF5A45; fill: currentColor; stroke: none; }
.ct-link em { font-style: normal; color: var(--ink); }
.ct-hint { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.ct-sheet {
padding: 14px 10px 12px; border-radius: 14px; background: #050404;
border: 1px solid var(--line); box-shadow: inset 0 0 70px rgba(0, 0, 0, .7);
}
.ct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: 14px; }
.ct-cell { position: relative; min-width: 0; animation: rise .5s var(--ease) both; }
.ct-frame {
position: relative; display: block; width: 100%; padding: 14px 4px; border: 0; border-radius: 0;
background: #100E0B; cursor: pointer;
}
.ct-frame::before, .ct-frame::after {
content: ""; position: absolute; inset-inline: 0; height: 8px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Crect x='3.5' y='1.5' width='9' height='5' rx='1.4' fill='%23F5EEE1' fill-opacity='.16'/%3E%3C/svg%3E") repeat-x center / 16px 8px;
}
.ct-frame::before { top: 3px; }
.ct-frame::after { bottom: 3px; }
.ct-img { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: #000; }
.ct-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s; }
.ct-frame:hover .ct-img img { transform: scale(1.06); }
.ct-no {
position: absolute; z-index: 1; right: 5px; bottom: 4px; padding: 0 6px; border-radius: 4px; line-height: 1.6;
font-size: 10.5px; font-weight: 800; color: var(--y); background: rgba(0, 0, 0, .66);
}
.ct-mark { position: absolute; z-index: 2; left: -3px; top: 4px; width: calc(100% + 6px); height: calc(100% - 8px); pointer-events: none; overflow: visible; }
.ct-mark path {
fill: none; stroke: #FF4B36; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 75, 54, .55));
transition: stroke-dashoffset .55s var(--ease), opacity .2s;
}
.ct-frame.fav .ct-mark path { stroke-dashoffset: 0; opacity: 1; }
.ct-heart {
position: absolute; z-index: 3; top: 19px; right: 9px; width: 24px; height: 24px; display: grid; place-items: center;
border-radius: 50%; color: #fff; background: #FF4B36; box-shadow: 0 4px 14px -2px rgba(255, 75, 54, .75);
transform: scale(0); transition: transform .4s var(--spring);
}
.ct-heart svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.ct-frame.fav .ct-heart { transform: scale(1); }
.ct-loupe {
position: absolute; z-index: 3; top: 19px; left: 9px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .58); border: 1px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, transform .2s var(--ease);
}
.ct-loupe:hover { background: rgba(251, 181, 69, .85); color: #1B1206; transform: scale(1.08); }
.ct-loupe svg { width: 15px; height: 15px; }
.ct-cap { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 6px 0; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.ct-cap > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-cap i { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; }
.ct-cap i svg { width: 10px; height: 10px; stroke-width: 3.4; }
.ct-cap i.ok { color: var(--green); background: rgba(78, 211, 140, .16); }
.ct-cap i.bad { color: var(--red); background: rgba(255, 107, 87, .16); }
.ct-cap i.aid { color: var(--y-hi); background: rgba(251, 181, 69, .16); }
.ct-cap i.aid svg { width: 11px; height: 11px; stroke-width: 2; }
.ct-more {
display: block; width: 100%; margin-top: 12px; padding: 10px; border-radius: 12px;
font-size: 14px; font-weight: 800; color: var(--ink-2);
background: rgba(255, 240, 215, .04); border: 1px dashed var(--line-2); transition: border-color .2s, color .2s;
}
.ct-more:hover { border-color: rgba(251, 181, 69, .5); color: var(--y-hi); }
.fv-count { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 16px; }
.fv-count b { font-size: 44px; font-weight: 900; line-height: 1.4; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv-count span { font-size: 15px; color: var(--muted); }
.fav-grid { columns: 3; column-gap: 14px; padding: 18px 24px 8px; border-top: 1px solid var(--line); }
.fv-item {
position: relative; display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
background: #000; break-inside: avoid; -webkit-column-break-inside: avoid;
box-shadow: 0 0 0 1px var(--line-2), 0 20px 40px -24px #000;
transition: transform .3s var(--ease), box-shadow .3s; animation: rise .5s var(--ease) both;
}
.fv-item:hover, .fv-item:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(251, 181, 69, .5), 0 24px 44px -20px var(--y-glow); }
.fv-item img { display: block; width: 100%; height: auto; min-height: 60px; }
.fv-item::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85)); pointer-events: none; }
.fv-cap { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; text-align: right; line-height: 1.45; }
.fv-cap b { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.fv-cap small { display: block; font-size: 11px; color: rgba(255, 255, 255, .6); direction: ltr; text-align: right; }
.fav-grid .album-empty { column-span: all; }
.viewer-sheet { width: min(100%, 780px); }
.viewer-sheet h2 { margin-bottom: 0; }
.vw-sub { display: block; font-size: 13px; color: var(--muted); direction: ltr; }
.vw-fig { position: relative; display: flex; align-items: center; justify-content: center; min-height: 180px; margin: 16px 0 18px; }
.vw-fig::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
border-radius: 50%; border: 2px solid rgba(255, 236, 200, .1); border-top-color: var(--y); animation: spin .7s linear infinite;
}
.vw-fig.loaded { min-height: 0; }
.vw-fig.loaded::after { display: none; }
.vw-fig img {
display: block; width: auto; height: auto; max-width: 100%; max-height: min(60vh, 600px); border-radius: 8px;
box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -26px #000;
opacity: 0; transform: scale(1.03); transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.vw-fig.loaded img { opacity: 1; transform: none; }
.viewer-sheet .form-actions .btn { flex: 1 1 0; white-space: nowrap; padding-inline: 14px; }
.viewer-sheet .btn svg { width: 17px; height: 17px; }
#vw-fav svg { fill: currentColor; stroke: none; }
#vw-fav.btn.ghost svg { color: #FF5A45; }
@media (max-width: 600px) {
.spi-in b { font-size: 30px; }
.spi-in p { font-size: 14px; }
.spi-ic { width: 58px; height: 58px; border-radius: 17px; }
.spi-ic svg { width: 28px; height: 28px; }
.sp-chip { top: 10px; left: 10px; font-size: 11.5px; }
.sp-grid, .sp-row { gap: 8px; }
.sp-name { font-size: 11.5px; padding: 2px 9px; bottom: 7px; }
.sp-pick kbd { width: 22px; height: 22px; top: 7px; right: 7px; font-size: 11px; }
.rsec { padding: 20px 14px; }
.rsec-head { gap: 10px; margin-bottom: 14px; }
.rsec-ic { width: 34px; height: 34px; border-radius: 10px; }
.rsec-head b { font-size: 17px; }
.rsec-note { font-size: 12px; }
.ct-sheet { padding: 12px 6px 10px; }
.ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
.ct-frame { padding: 12px 3px; }
.ct-frame::before { top: 2px; }
.ct-frame::after { bottom: 2px; }
.ct-cap { font-size: 11.5px; gap: 4px; padding: 6px 3px 0; }
.ct-cap i { width: 15px; height: 15px; }
.ct-loupe { width: 24px; height: 24px; top: 16px; left: 6px; }
.ct-loupe svg { width: 13px; height: 13px; }
.ct-heart { width: 20px; height: 20px; top: 16px; right: 6px; }
.ct-heart svg { width: 11px; height: 11px; }
.ct-no { font-size: 9.5px; padding: 0 4px; }
.fav-grid { columns: 2; column-gap: 8px; padding: 14px 14px 6px; }
.fv-item { margin-bottom: 8px; }
.fv-cap b { font-size: 12.5px; }
.viewer-sheet .form-actions .btn { flex: 1 1 100%; }
.vw-fig img { max-height: 56vh; }
}
.kitbar { display: inline-flex; align-items: center; gap: 6px; }
.kmain {
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding-inline: 12px 5px; border-radius: 999px;
background: linear-gradient(180deg, rgba(251, 181, 69, .17), rgba(251, 181, 69, .06));
border: 1px solid rgba(251, 181, 69, .45);
touch-action: manipulation; -webkit-tap-highlight-color: transparent;
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
transition: border-color .2s, background .2s, transform .16s var(--ease), opacity .2s;
}
.kmain:hover:not(:disabled) { border-color: rgba(251, 181, 69, .9); background: linear-gradient(180deg, rgba(251, 181, 69, .28), rgba(251, 181, 69, .11)); }
.kmain:active:not(:disabled) { transform: scale(.96); }
.kmain:disabled { cursor: default; opacity: .38; }
.kmain .km-ic { width: 16px; height: 16px; flex: none; color: var(--y); }
.km-label { font-size: 13.5px; font-weight: 800; color: var(--y-hi); white-space: nowrap; }
.km-cost {
flex: none; display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; padding-inline: 6px; border-radius: 999px;
background: var(--ag-soft); border: 1px solid rgba(207, 216, 224, .3);
}
.km-cost b { font-size: 12.5px; font-weight: 900; color: #EDF2F6; }
.kmain.poor .km-cost { border-color: var(--line-2); background: transparent; }
.kmain.poor .km-cost b { color: var(--faint); }
.kmain.used { animation: bump .6s var(--spring); }
.kmain.nudge { border-color: var(--y); box-shadow: 0 0 0 3px rgba(251, 181, 69, .14), 0 8px 22px -12px var(--y-glow); animation: hm-beat 2.8s ease-in-out infinite; }
.kit-more {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 34px; height: 34px; padding: 0; border-radius: 999px;
color: var(--ink-2); background: rgba(0, 0, 0, .28); border: 1px solid var(--line-2);
transition: color .2s, border-color .2s, background .2s;
}
.kit-more:hover:not(:disabled) { color: var(--y-hi); border-color: rgba(251, 181, 69, .5); background: rgba(251, 181, 69, .08); }
.kit-more:disabled { opacity: .38; cursor: default; }
.kit-more svg { width: 16px; height: 16px; }
.clue.tell { color: var(--ink-2); background: rgba(255, 240, 215, .045); border-color: var(--line-2); }
.clue.tell svg { color: var(--muted); }
.clue.tell.arm { color: var(--y-hi); background: var(--y-soft); border-color: rgba(251, 181, 69, .4); }
.clue.tell.arm svg { color: var(--y); animation: blink 1.6s ease-in-out infinite; }
.kits-sheet { width: min(100%, 440px); }
.kits-cap { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.kits-cap b { color: var(--ag); font-weight: 900; font-size: 15px; }
.kits-list { display: grid; gap: 8px; margin: 18px 0 16px; }
.kit-pick {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; text-align: right;
border-radius: var(--r-sm); background: rgba(0, 0, 0, .28); border: 1px solid var(--line);
transition: border-color .18s, background .18s, transform .18s var(--ease);
}
.kit-pick:hover:not(:disabled) { border-color: rgba(251, 181, 69, .5); background: rgba(251, 181, 69, .07); transform: translateY(-1px); }
.kit-pick > div { flex: 1; min-width: 0; }
.kit-pick b { display: block; font-size: 15px; font-weight: 800; line-height: 1.6; }
.kit-pick span.tx { display: block; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.kit-pick.best { border-color: rgba(251, 181, 69, .6); background: rgba(251, 181, 69, .08); }
.kit-pick.best b { color: var(--y-hi); }
.kit-pick:disabled { opacity: .45; cursor: default; }
.kit-pick .tag {
flex: none; display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 9px; border-radius: 999px;
font-size: 11px; font-weight: 700; color: var(--ag); background: var(--ag-soft); border: 1px solid rgba(207, 216, 224, .3);
}
.kit-pick .tag b { display: inline; font-size: 14px; font-weight: 900; color: #EDF2F6; }
.kit-pick:disabled .tag, .kit-pick:disabled .tag b { color: var(--faint); background: transparent; border-color: var(--line-2); }
.clues { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 4px 0; animation: rise .3s var(--ease) both; }
.clue {
display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
font-size: 13px; font-weight: 700; color: var(--y-hi);
background: rgba(251, 181, 69, .12); border: 1px solid rgba(251, 181, 69, .42);
}
.clue svg { width: 15px; height: 15px; color: var(--y); }
.clue b { font-size: 15px; font-weight: 900; color: #fff; }
.clue.no { color: var(--muted); background: rgba(255, 240, 215, .05); border-color: var(--line-2); }
.clue.no svg { color: var(--muted); }
.htip {
position: fixed; z-index: 78; max-width: min(260px, calc(100vw - 24px)); pointer-events: none;
padding: 8px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.75; color: var(--ink);
background: linear-gradient(180deg, #221E18, #15120F); border: 1px solid rgba(251, 181, 69, .45);
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); animation: coach-in .22s var(--spring) both;
}
.htip.bad { border-color: rgba(255, 107, 87, .45); color: var(--ink-2); }
.hfly { position: fixed; z-index: 64; pointer-events: none; margin: -14px 0 0 -14px; transition: transform .55s var(--ease), opacity .55s var(--ease); }
.hfly svg { display: block; width: 28px; height: 28px; color: var(--y); filter: drop-shadow(0 0 12px var(--y-glow)); }
.hfly svg.flip { transform: scaleX(-1); }
.hit { animation: hit-pulse .7s var(--ease); }
@keyframes hit-pulse { 35% { filter: drop-shadow(0 0 18px var(--y-glow)) brightness(1.12); } }
.netbar {
position: fixed; z-index: 80; inset-inline: 0; top: 0; margin: auto; width: max-content; max-width: 94vw;
display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 0 0 14px 14px;
font-size: 13.5px; font-weight: 700; color: #2A0803; background: var(--red);
box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .9); animation: rise .3s var(--ease) both;
}
.netbar svg { width: 15px; height: 15px; }
.undo, .offer {
position: fixed; z-index: 62; inset-inline: 0; bottom: 26px; margin: auto; width: max-content; max-width: 92vw;
display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 18px; border-radius: 999px;
font-size: 14px; color: var(--ink); background: rgba(26, 23, 19, .94); border: 1px solid rgba(251, 181, 69, .4);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .85), 0 0 30px -14px var(--y-glow);
animation: toast-in .35s var(--spring) both;
}
.undo b, .offer b { color: var(--y-hi); font-weight: 800; }
.undo button, .offer .offer-yes {
flex: none; padding: 7px 16px; border-radius: 999px; border: 0;
font-size: 13.5px; font-weight: 800; color: #1B1206; background: var(--gold);
}
.undo button:hover, .offer .offer-yes:hover { filter: brightness(1.06); }
.offer .offer-no { flex: none; padding: 7px 10px; border: 0; background: none; font-size: 13px; color: var(--muted); }
.offer .offer-no:hover { color: var(--ink-2); }
.offer svg { width: 17px; height: 17px; color: var(--y); vertical-align: -3px; margin-inline-end: 6px; }
.offer svg.flip { transform: scaleX(-1); }
@media (max-width: 600px) {
.kmain { height: 32px; gap: 6px; padding-inline: 10px 4px; }
.km-label { font-size: 12.5px; }
.km-cost { min-width: 22px; height: 22px; }
.kit-more { width: 32px; height: 32px; }
.kit-more svg { width: 15px; height: 15px; }
.harm { top: 10px; right: 10px; font-size: 11px; padding: 3px 10px; }
.clues { padding-top: 10px; }
.clue { font-size: 12.5px; padding: 5px 11px; }
#s-game .card { padding-bottom: 0; }
.feedback { padding-top: 14px; padding-bottom: 16px; min-height: 0; }
.name-mode .opt.pic .pic-img { height: clamp(140px, 29vh, 240px); }
.undo, .offer { bottom: 24px; font-size: 13px; }
}
#bag { align-items: end; justify-items: center; padding: 0; }
#bag .bag-sheet {
width: min(100%, 560px); max-height: calc(100dvh - 40px);
border-radius: 24px 24px 0 0; padding: 26px 20px 18px;
animation: tray-in .38s var(--ease) both;
}
@keyframes tray-in { from { opacity: 0; transform: translateY(26px); } }
.bag-sheet .bag-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.kit-row {
display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 14px; text-align: right;
border-radius: var(--r-sm); background: rgba(0, 0, 0, .25); border: 1px solid var(--line);
}
.kit-row > div { flex: 1; min-width: 0; }
.kit-row b { display: block; font-size: 15px; font-weight: 800; line-height: 1.6; }
.kit-row div span { display: block; font-size: 13px; color: var(--muted); line-height: 1.8; }
.kit-row:hover:not(:disabled) { border-color: rgba(251, 181, 69, .45); }
.kit-row.sel { border-color: var(--y); background: rgba(251, 181, 69, .1); box-shadow: 0 0 0 1px rgba(251, 181, 69, .3); }
.kit-row.off { opacity: .5; }
.kit-row.slot { border-style: dashed; }
.kit-row.slot .bag-ic { color: var(--faint); background: transparent; border-color: var(--line); }
.kit-row .bag-n.plus { color: var(--y); background: transparent; border: 1px dashed rgba(251, 181, 69, .5); }
.bag-sheet .bag-cap span { display: inline-flex; align-items: center; gap: 5px; }
.bag-sheet .bag-cap b { color: var(--y-hi); }
.bag-sheet .bag-cap svg { width: 14px; height: 14px; color: var(--y); }
@media (max-width: 600px) {
#bag .bag-sheet { padding: 22px 14px 14px; }
.kit-row { padding: 10px 12px; gap: 10px; }
.kit-row b { font-size: 14px; }
.kit-row div span { font-size: 12px; }
}
.timer.frozen > i { background: linear-gradient(90deg, #7FB5FF, #CFE4FF); box-shadow: 0 0 14px #7FB5FF; }
.bag-sheet { width: min(100%, 560px); }
.bag-list { display: grid; gap: 10px; margin: 18px 0 16px; text-align: right; }
.bag-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--y); background: var(--y-soft); border: 1px solid rgba(251, 181, 69, .25); }
.bag-ic svg { width: 18px; height: 18px; }
.kit-row .bag-n.ag {
min-width: 34px; color: #16202A;
background: linear-gradient(180deg, #EDF2F6, #CFD8E0 55%, #A9B6C2);
box-shadow: 0 6px 16px -8px rgba(207, 216, 224, .8);
}
.kit-price.ag { color: var(--ag); background: var(--ag-soft); border-color: rgba(207, 216, 224, .3); }
.bag-cap .ag { color: var(--ag); }
.bag-n { flex: none; align-self: center; min-width: 30px; padding: 2px 10px; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 900; color: #1B1206; background: var(--gold); }
.kit-price {
display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px;
font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap;
color: var(--y-hi); background: var(--y-soft); border: 1px solid rgba(251, 181, 69, .25);
}
#howto .howto-sheet { width: min(100%, 460px); }
.steps {
display: grid; margin: 20px 0; padding: 0; list-style: none;
text-align: right; border-block: 1px solid var(--line);
}
.steps li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 2px; }
.steps li + li { border-top: 1px solid var(--line); }
.steps .st-n {
flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 2px;
border-radius: 50%; font: 900 15px/1 "Pinar", sans-serif; color: var(--y);
background: var(--y-soft); border: 1px solid rgba(251, 181, 69, .3);
}
.steps li > div { flex: 1; min-width: 0; }
.steps b { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.65; }
.steps li > div > span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.85; color: var(--muted); }
@media (max-width: 600px) {
.steps li { padding: 13px 0; gap: 10px; }
.steps b { font-size: 14.5px; }
.steps li > div > span { font-size: 12.5px; }
}
.bag-how { margin: 0 0 6px; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); text-align: right; }
.bag-how span { display: block; margin-top: 9px; padding-inline-start: 2px; }
.bag-how span:first-child { margin-top: 0; }
.bag-how b { color: var(--y-hi); }
.mix-note {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-sm);
background: rgba(255, 107, 87, .1); border: 1px solid rgba(255, 107, 87, .32);
font-size: 14px; line-height: 1.8; color: var(--ink-2);
}
.mix-note b { color: #FFB3A8; font-weight: 800; }
.mix-note svg { color: var(--red); }
.mix-btn {
padding: 5px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: var(--ink);
background: rgba(255, 240, 215, .06); border: 1px solid var(--line-2); transition: border-color .2s, background .2s;
}
.mix-btn:hover { border-color: rgba(251, 181, 69, .6); background: rgba(251, 181, 69, .1); }
.cmp-sheet { width: min(100%, 860px); }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 16px; }
.cmp-col { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-md); background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.cmp-col > b { font-size: 16px; font-weight: 900; line-height: 1.6; color: var(--y-hi); }
.cmp-shots { display: flex; gap: 8px; justify-content: center; align-items: center; }
.cmp-shots img {
display: block; width: auto; height: auto; max-width: calc(50% - 4px); max-height: 30vh; border-radius: 8px; background: #040303;
box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -22px #000;
}
.coach {
position: fixed; z-index: 75; max-width: min(290px, calc(100vw - 32px));
padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.8; color: var(--ink);
background: linear-gradient(180deg, #221E18, #15120F); border: 1px solid rgba(251, 181, 69, .5);
box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9), 0 0 34px -14px var(--y-glow);
animation: coach-in .35s var(--spring) both;
}
@keyframes coach-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.coach::after {
content: ""; position: absolute; width: 12px; height: 12px; rotate: 45deg;
background: #1D1915; border: 1px solid rgba(251, 181, 69, .5);
}
.coach::after { left: var(--arrow, 24px); }
.coach.below::after { top: -7px; border-left: 0; border-bottom: 0; }
.coach.above::after { bottom: -7px; border-right: 0; border-top: 0; }
.coach b { color: var(--y-hi); }
.coach .coach-x { display: block; margin: 8px 0 0; font-size: 12.5px; font-weight: 800; color: var(--y); }
@media (max-width: 600px) {
.cmp-grid { grid-template-columns: 1fr; gap: 10px; }
.cmp-shots img { max-height: 22vh; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}