mates
0cf2ddc3ce
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 26s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 2m2s
CI / Build and push Docker image (push) Successful in 51s
CI / Notify (push) Successful in 6s
719 lines
21 KiB
SCSS
719 lines
21 KiB
SCSS
.wheel-confetti {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 2000; // nad modalem (bootstrap 1055)
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
|
||
> span {
|
||
position: absolute;
|
||
will-change: transform, opacity;
|
||
animation-fill-mode: both;
|
||
}
|
||
}
|
||
|
||
// Vrh: rychle vzhůru do vrcholu (zpomalení), pak volný pád (zrychlení)
|
||
@keyframes confetti-throw {
|
||
0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
|
||
6% { opacity: 1; }
|
||
38% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
|
||
88% { opacity: 1; }
|
||
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1); opacity: 0; }
|
||
}
|
||
|
||
// Déšť: plynulý pád shora s mírným houpáním
|
||
@keyframes confetti-rain {
|
||
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; animation-timing-function: ease-in-out; }
|
||
8% { opacity: 1; }
|
||
40% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)); animation-timing-function: ease-in; }
|
||
88% { opacity: 1; }
|
||
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)); opacity: 0; }
|
||
}
|
||
|
||
// Samolepky Umamusume — stín pro čitelnost na libovolném pozadí
|
||
.confetti-uma {
|
||
filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
|
||
}
|
||
|
||
.confetti-uma-emoji {
|
||
line-height: 1;
|
||
}
|
||
|
||
.confetti-uma-badge {
|
||
padding: 4px 14px;
|
||
border-radius: 999px;
|
||
border: 3px solid #fff;
|
||
color: #fff;
|
||
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
||
font-weight: 900;
|
||
font-size: 1.15rem;
|
||
white-space: nowrap;
|
||
text-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
|
||
box-shadow: 0 4px 0 rgb(0 0 0 / 0.15);
|
||
}
|
||
|
||
.confetti-uma-img img {
|
||
width: 92px;
|
||
height: auto;
|
||
}
|
||
|
||
// Portréty (bez průhlednosti) jako kulaté samolepky s barevným lemem
|
||
.confetti-uma-img.round img,
|
||
.confetti-uma-voice img.round {
|
||
width: 84px;
|
||
height: 84px;
|
||
object-fit: cover;
|
||
border-radius: 50%;
|
||
border: 4px solid #fff;
|
||
box-shadow: 0 0 0 3px #ff6fa3, 0 4px 8px rgb(0 0 0 / 0.3);
|
||
}
|
||
|
||
.confetti-uma-voice img.round {
|
||
width: 96px;
|
||
height: 96px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.confetti-uma-banner {
|
||
position: absolute;
|
||
top: 38%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 12px 48px;
|
||
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
||
font-weight: 900;
|
||
font-size: clamp(2rem, 7vw, 4rem);
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #e84d86, #ff6fa3);
|
||
clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
|
||
text-shadow: 0 3px 0 rgb(0 0 0 / 0.2);
|
||
border-top: 5px solid #ffc531;
|
||
border-bottom: 5px solid #ffc531;
|
||
animation: uma-banner 1.8s cubic-bezier(0.2, 1.4, 0.4, 1) both;
|
||
}
|
||
|
||
@keyframes uma-banner {
|
||
0% { transform: translate(-150%, -50%) skewX(-12deg); opacity: 0; }
|
||
25% { transform: translate(-50%, -50%) skewX(-12deg); opacity: 1; }
|
||
75% { transform: translate(-50%, -50%) skewX(-12deg) scale(1.04); opacity: 1; }
|
||
100% { transform: translate(60%, -50%) skewX(-12deg); opacity: 0; }
|
||
}
|
||
|
||
// „Hláška" postavy při finálním výsledku
|
||
.confetti-uma-voice {
|
||
position: absolute;
|
||
left: 16px;
|
||
bottom: 16px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
max-width: min(460px, calc(100vw - 32px));
|
||
animation: uma-voice 4.6s ease both;
|
||
|
||
img {
|
||
flex: none;
|
||
width: 110px;
|
||
height: auto;
|
||
filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.3));
|
||
}
|
||
}
|
||
|
||
.confetti-uma-bubble {
|
||
position: relative;
|
||
margin-bottom: 40px;
|
||
padding: 12px 16px;
|
||
background: #fff;
|
||
color: #1d3322;
|
||
border: 3px solid #ff6fa3;
|
||
border-radius: 18px;
|
||
box-shadow: 0 4px 0 #e84d86;
|
||
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
||
|
||
p {
|
||
margin: 0;
|
||
font-weight: 800;
|
||
font-size: 0.95rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
small {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: #e84d86;
|
||
font-weight: 800;
|
||
}
|
||
|
||
// ocásek bubliny směrem k postavě
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -14px;
|
||
bottom: 14px;
|
||
border: 8px solid transparent;
|
||
border-right: 10px solid #ff6fa3;
|
||
}
|
||
}
|
||
|
||
@keyframes uma-voice {
|
||
0% { opacity: 0; transform: translateY(40px) scale(0.8); }
|
||
10% { opacity: 1; transform: translateY(0) scale(1.03); }
|
||
15% { transform: translateY(0) scale(1); }
|
||
85% { opacity: 1; transform: translateY(0); }
|
||
100% { opacity: 0; transform: translateY(20px); }
|
||
}
|
||
|
||
// ============================================
|
||
// Konfety ve stylu My Little Pony
|
||
// ============================================
|
||
.confetti-mlp {
|
||
filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
|
||
}
|
||
|
||
.confetti-mlp-badge {
|
||
padding: 4px 14px;
|
||
border-radius: 999px;
|
||
border: 3px solid #fff;
|
||
color: #fff;
|
||
font-family: 'Fredoka', 'Nunito', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
white-space: nowrap;
|
||
text-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
|
||
box-shadow: 0 0 12px rgb(255 255 255 / 0.7), 0 4px 0 rgb(0 0 0 / 0.15);
|
||
}
|
||
|
||
// Duhový nápis „Sonic Rainboom" přes celou obrazovku
|
||
.confetti-mlp-banner {
|
||
position: absolute;
|
||
top: 38%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 12px 44px;
|
||
font-family: 'Fredoka', 'Nunito', sans-serif;
|
||
font-weight: 700;
|
||
font-size: clamp(1.8rem, 6.5vw, 3.6rem);
|
||
white-space: nowrap;
|
||
color: #fff;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, #ee4144, #f37033, #e3b829, #62bc4d, #1e98d3, #672f89);
|
||
border: 5px solid #fff;
|
||
text-shadow: 0 3px 0 rgb(0 0 0 / 0.25);
|
||
box-shadow: 0 0 30px rgb(236 61 143 / 0.5), 0 8px 0 rgb(0 0 0 / 0.12);
|
||
animation: mlp-banner 2s cubic-bezier(0.2, 1.4, 0.4, 1) both;
|
||
}
|
||
|
||
@keyframes mlp-banner {
|
||
0% { transform: translate(-50%, -50%) scale(0.2) rotate(-8deg); opacity: 0; }
|
||
25% { transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1; }
|
||
35% { transform: translate(-50%, -50%) scale(1); }
|
||
75% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
|
||
100% { transform: translate(-50%, -160%) scale(0.9); opacity: 0; }
|
||
}
|
||
|
||
// Postava s hláškou — místo obrázku kulatý „cutie mark" s emoji
|
||
.confetti-mlp-avatar {
|
||
flex: none;
|
||
display: grid;
|
||
place-items: center;
|
||
width: 84px;
|
||
height: 84px;
|
||
margin-bottom: 8px;
|
||
font-size: 46px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 35% 30%, #fff, #f6ecff);
|
||
border: 4px solid #fff;
|
||
box-shadow: 0 0 0 4px var(--mlp-speaker, #8e4fd1), 0 4px 10px rgb(0 0 0 / 0.3);
|
||
}
|
||
|
||
.confetti-mlp-bubble {
|
||
position: relative;
|
||
margin-bottom: 40px;
|
||
padding: 12px 16px;
|
||
background: #fff;
|
||
color: #2e1f47;
|
||
border: 3px solid var(--mlp-speaker, #8e4fd1);
|
||
border-radius: 22px;
|
||
box-shadow: 0 4px 0 var(--mlp-speaker, #8e4fd1);
|
||
font-family: 'Fredoka', 'Nunito', sans-serif;
|
||
|
||
p {
|
||
margin: 0;
|
||
font-weight: 600;
|
||
font-size: 1rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
small {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: var(--mlp-speaker, #8e4fd1);
|
||
font-weight: 700;
|
||
}
|
||
|
||
// ocásek bubliny směrem k postavě
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -14px;
|
||
bottom: 14px;
|
||
border: 8px solid transparent;
|
||
border-right: 10px solid var(--mlp-speaker, #8e4fd1);
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// Konfety ve stylu Hell Girl
|
||
// ============================================
|
||
.confetti-hg {
|
||
filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.55)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.3));
|
||
}
|
||
|
||
.confetti-hg-badge {
|
||
padding: 4px 14px;
|
||
border: 1px solid #c8102e;
|
||
outline: 1px solid rgb(200 16 46 / 0.4);
|
||
outline-offset: 2px;
|
||
color: #fff4ee;
|
||
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||
font-weight: 800;
|
||
font-size: 1.1rem;
|
||
letter-spacing: 1px;
|
||
white-space: nowrap;
|
||
text-shadow: 0 0 8px rgb(232 52 79 / 0.7);
|
||
}
|
||
|
||
// Nápis „poslání do pekla" — černá deska s rudým lemem, vynoří se z mlhy
|
||
.confetti-hg-banner {
|
||
position: absolute;
|
||
top: 38%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 14px 48px;
|
||
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||
font-weight: 800;
|
||
font-size: clamp(2rem, 7vw, 4rem);
|
||
letter-spacing: 0.3em;
|
||
white-space: nowrap;
|
||
color: #fff4ee;
|
||
background: linear-gradient(90deg, transparent, #12070a 15%, #12070a 85%, transparent);
|
||
border-top: 2px solid #c8102e;
|
||
border-bottom: 2px solid #c8102e;
|
||
text-shadow: 0 0 18px rgb(232 52 79 / 0.9), 0 0 4px #c8102e;
|
||
animation: hg-banner 2.6s ease both;
|
||
}
|
||
|
||
@keyframes hg-banner {
|
||
0% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; filter: blur(12px); }
|
||
25% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
|
||
75% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
|
||
100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; filter: blur(8px); }
|
||
}
|
||
|
||
// Postava s hláškou — tmavý odznak s rudou září a bublina jako svitek
|
||
.confetti-hellgirl-voice {
|
||
.confetti-mlp-avatar {
|
||
border-color: #12070a;
|
||
background: radial-gradient(circle at 50% 60%, #3a0d16, #12070a);
|
||
box-shadow: 0 0 0 3px var(--mlp-speaker, #c8102e), 0 0 18px rgb(200 16 46 / 0.6);
|
||
}
|
||
|
||
.confetti-mlp-bubble {
|
||
background: #170c0f;
|
||
color: #f3e6e2;
|
||
border: 1px solid var(--mlp-speaker, #c8102e);
|
||
border-radius: 3px;
|
||
box-shadow: 0 0 16px rgb(0 0 0 / 0.6), 0 0 10px rgb(200 16 46 / 0.3);
|
||
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// Konfety ve stylu K-ON!
|
||
// ============================================
|
||
.confetti-kon {
|
||
filter: drop-shadow(0 3px 3px rgb(39 49 95 / 0.25));
|
||
}
|
||
|
||
// Samolepky jako na pouzdru kytary — bílý okraj a lehce natočené
|
||
.confetti-kon-badge {
|
||
padding: 4px 14px;
|
||
border-radius: 10px;
|
||
border: 3px solid #fff;
|
||
color: #fff;
|
||
font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
||
font-weight: 900;
|
||
font-size: 1.05rem;
|
||
white-space: nowrap;
|
||
text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
|
||
box-shadow: 0 3px 0 rgb(39 49 95 / 0.25);
|
||
}
|
||
|
||
// Nápis „Houkago Tea Time" — vstupenka na školní koncert s notovou osnovou
|
||
.confetti-kon-banner {
|
||
position: absolute;
|
||
top: 38%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 14px 44px;
|
||
font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
||
font-weight: 900;
|
||
font-size: clamp(1.6rem, 6vw, 3.4rem);
|
||
white-space: nowrap;
|
||
color: #27315f;
|
||
border-radius: 18px;
|
||
background:
|
||
repeating-linear-gradient(180deg, transparent 0 9px, rgb(39 49 95 / 0.12) 9px 10px) center / 100% 50px no-repeat,
|
||
#fffaf0;
|
||
border: 4px solid #27315f;
|
||
box-shadow: 0 0 0 6px #fffaf0, 0 0 0 9px #d43f62, 0 12px 26px rgb(0 0 0 / 0.25);
|
||
animation: kon-banner 2.2s cubic-bezier(0.3, 1.5, 0.5, 1) both;
|
||
}
|
||
|
||
// Vyskočí do rytmu (raz-dva) a odplave nahoru
|
||
@keyframes kon-banner {
|
||
0% { transform: translate(-50%, -50%) scale(0.3) rotate(6deg); opacity: 0; }
|
||
18% { transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); opacity: 1; }
|
||
28% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
|
||
40% { transform: translate(-50%, -50%) scale(1.05) rotate(-2deg); }
|
||
50% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
|
||
80% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; }
|
||
100% { transform: translate(-50%, -150%) scale(0.9) rotate(-2deg); opacity: 0; }
|
||
}
|
||
|
||
// Postava s hláškou — krémový odznak a bublina jako stránka notového sešitu
|
||
.confetti-kon-voice {
|
||
.confetti-mlp-avatar {
|
||
background: radial-gradient(circle at 40% 35%, #fffaf0, #fbe6c8);
|
||
box-shadow: 0 0 0 4px var(--mlp-speaker, #d43f62), 0 4px 10px rgb(0 0 0 / 0.3);
|
||
}
|
||
|
||
.confetti-mlp-bubble {
|
||
background:
|
||
repeating-linear-gradient(180deg, transparent 0 21px, rgb(39 49 95 / 0.08) 21px 22px),
|
||
#fffaf0;
|
||
color: #27315f;
|
||
border-radius: 16px;
|
||
font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
||
|
||
p {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// Konfety ve stylu Bocchi the Rock!
|
||
// ============================================
|
||
.confetti-bocchi {
|
||
filter: drop-shadow(3px 3px 0 rgb(29 26 34 / 0.85));
|
||
}
|
||
|
||
// Samolepky z flyeru live house — černá linka a tvrdý stín
|
||
.confetti-bocchi-badge {
|
||
padding: 4px 14px;
|
||
border-radius: 6px;
|
||
border: 3px solid #1d1a22;
|
||
color: #fff;
|
||
font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
|
||
font-size: 1.05rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// Nápis „Kessoku Band" — žlutá samolepka s růžovým stínem, při dopadu se zachvěje jako Bocchi
|
||
.confetti-bocchi-banner {
|
||
position: absolute;
|
||
top: 38%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 12px 40px;
|
||
font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
|
||
font-size: clamp(1.8rem, 7vw, 4rem);
|
||
white-space: nowrap;
|
||
color: #1d1a22;
|
||
background: #ffcf33;
|
||
border: 5px solid #1d1a22;
|
||
border-radius: 10px;
|
||
box-shadow: 10px 10px 0 #e0457b, 18px 18px 0 #1d1a22;
|
||
animation: bocchi-banner 2.4s ease both;
|
||
}
|
||
|
||
@keyframes bocchi-banner {
|
||
0% { transform: translate(-50%, -50%) scale(2.2) rotate(-8deg); opacity: 0; }
|
||
14% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
|
||
17% { transform: translate(calc(-50% - 6px), -50%) rotate(-3deg); }
|
||
20% { transform: translate(calc(-50% + 6px), -50%) rotate(-3deg); }
|
||
23% { transform: translate(calc(-50% - 3px), -50%) rotate(-3deg); }
|
||
26%, 80% { transform: translate(-50%, -50%) rotate(-3deg); opacity: 1; }
|
||
100% { transform: translate(-50%, 60%) rotate(4deg); opacity: 0; }
|
||
}
|
||
|
||
// Postava s hláškou — hranatý odznak a bublina jako z mangy s tvrdým stínem
|
||
.confetti-bocchi-voice {
|
||
.confetti-mlp-avatar {
|
||
border-radius: 12px;
|
||
border: 3px solid #1d1a22;
|
||
background: #ffcf33;
|
||
box-shadow: 5px 5px 0 var(--mlp-speaker, #e0457b);
|
||
}
|
||
|
||
.confetti-mlp-bubble {
|
||
background: #fff;
|
||
color: #1d1a22;
|
||
border: 3px solid #1d1a22;
|
||
border-radius: 10px;
|
||
box-shadow: 5px 5px 0 var(--mlp-speaker, #e0457b);
|
||
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
||
|
||
p {
|
||
font-weight: 800;
|
||
}
|
||
|
||
&::before {
|
||
border-right-color: #1d1a22;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// Konfety ve stylu Neon Genesis Evangelion
|
||
// ============================================
|
||
.confetti-eva {
|
||
filter: drop-shadow(0 0 6px rgb(242 107 0 / 0.45)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.3));
|
||
}
|
||
|
||
// Štítky jako hlášení na monitorech NERV — ostré hrany, kondenzované verzálky
|
||
.confetti-eva-badge {
|
||
padding: 3px 14px;
|
||
border: 1px solid #f26b00;
|
||
color: #fff;
|
||
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 1.15rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// „おめでとう" z finále seriálu — title card: bílé mincho na černé, s výstražnými pruhy
|
||
.confetti-eva-banner {
|
||
position: absolute;
|
||
top: 38%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 16px 48px 20px;
|
||
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||
font-weight: 800;
|
||
font-size: clamp(2rem, 7vw, 4.2rem);
|
||
letter-spacing: 0.08em;
|
||
white-space: nowrap;
|
||
color: #fff;
|
||
background:
|
||
repeating-linear-gradient(-45deg, #f26b00 0 10px, #111214 10px 20px) top / 100% 6px no-repeat,
|
||
repeating-linear-gradient(-45deg, #f26b00 0 10px, #111214 10px 20px) bottom / 100% 6px no-repeat,
|
||
#0d0e10;
|
||
box-shadow: 0 0 0 1px #f26b00, 0 0 40px rgb(242 107 0 / 0.35);
|
||
animation: eva-banner 2.6s ease both;
|
||
}
|
||
|
||
// Ostrý střih jako mezi title cardy, na konci rychlé zhasnutí monitoru
|
||
@keyframes eva-banner {
|
||
0%, 6% { opacity: 0; transform: translate(-50%, -50%) scaleY(0.04); }
|
||
7% { opacity: 1; transform: translate(-50%, -50%) scaleY(1); }
|
||
9% { opacity: 0.4; }
|
||
11%, 82% { opacity: 1; transform: translate(-50%, -50%) scaleY(1); }
|
||
92% { opacity: 1; transform: translate(-50%, -50%) scale(1.04, 0.04); }
|
||
100% { opacity: 0; transform: translate(-50%, -50%) scale(0, 0.04); }
|
||
}
|
||
|
||
// Postava s hláškou — šestiúhelníkový odznak a bublina jako okno velínu
|
||
.confetti-evangelion-voice {
|
||
.confetti-mlp-avatar {
|
||
border: none;
|
||
border-radius: 0;
|
||
clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
|
||
background: linear-gradient(135deg, var(--mlp-speaker, #f26b00), #111214);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.confetti-mlp-bubble {
|
||
background: #0d0e10;
|
||
color: #f2efe6;
|
||
border: 1px solid #f26b00;
|
||
border-left: 4px solid var(--mlp-speaker, #f26b00);
|
||
border-radius: 0;
|
||
box-shadow: 0 0 18px rgb(242 107 0 / 0.3);
|
||
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
|
||
|
||
p {
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
small {
|
||
color: #ff8a1f;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
&::before {
|
||
border-right-color: #f26b00;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// Konfety ve stylu Yuru Camp△
|
||
// ============================================
|
||
.confetti-yc {
|
||
filter: drop-shadow(0 3px 3px rgb(90 58 36 / 0.25));
|
||
}
|
||
|
||
// Nášivky z kempů — oblé, s prošitým okrajem
|
||
.confetti-yc-badge {
|
||
padding: 5px 16px;
|
||
border-radius: 999px;
|
||
color: #fff;
|
||
outline: 2px dashed rgb(255 255 255 / 0.75);
|
||
outline-offset: -6px;
|
||
font-family: 'Kiwi Maru', 'Zen Maru Gothic', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 1.1rem;
|
||
white-space: nowrap;
|
||
text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
|
||
}
|
||
|
||
// Nápis „ゆるキャン△" na dřevěné ceduli kempu — pomalu se zhoupne jako na provázku
|
||
.confetti-yc-banner {
|
||
position: absolute;
|
||
top: 38%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 12px 44px 14px;
|
||
font-family: 'Kiwi Maru', 'Zen Maru Gothic', sans-serif;
|
||
font-weight: 500;
|
||
font-size: clamp(1.8rem, 7vw, 4rem);
|
||
white-space: nowrap;
|
||
color: #fdf3e1;
|
||
text-shadow: 0 2px 0 rgb(0 0 0 / 0.35);
|
||
background:
|
||
repeating-linear-gradient(178deg, rgb(255 255 255 / 0.05) 0 3px, transparent 3px 9px),
|
||
repeating-linear-gradient(181deg, rgb(0 0 0 / 0.07) 0 2px, transparent 2px 13px),
|
||
linear-gradient(180deg, #9a6743, #8a5a3b);
|
||
border: 4px solid #5a3a24;
|
||
border-radius: 12px;
|
||
box-shadow: 0 6px 0 #5a3a24, 0 14px 30px rgb(0 0 0 / 0.3);
|
||
transform-origin: 50% -40px;
|
||
animation: yc-banner 2.8s ease both;
|
||
}
|
||
|
||
@keyframes yc-banner {
|
||
0% { transform: translate(-50%, -120%) rotate(-8deg); opacity: 0; }
|
||
18% { transform: translate(-50%, -50%) rotate(5deg); opacity: 1; }
|
||
32% { transform: translate(-50%, -50%) rotate(-3deg); }
|
||
46% { transform: translate(-50%, -50%) rotate(1.5deg); }
|
||
58%, 82% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
|
||
100% { transform: translate(-50%, -50%) rotate(0deg) scale(0.94); opacity: 0; }
|
||
}
|
||
|
||
// Postava s hláškou — kulatá nášivka a bublina jako lísteček z deníku výprav
|
||
.confetti-yurucamp-voice {
|
||
.confetti-mlp-avatar {
|
||
border: 4px solid #fffdf8;
|
||
background: radial-gradient(circle at 40% 35%, #fffdf8, #f3e3c3);
|
||
box-shadow: 0 0 0 4px var(--mlp-speaker, #3f6b4a), 0 4px 10px rgb(0 0 0 / 0.3);
|
||
outline: 2px dashed var(--mlp-speaker, #3f6b4a);
|
||
outline-offset: -10px;
|
||
}
|
||
|
||
.confetti-mlp-bubble {
|
||
background: #fffdf8;
|
||
color: #3a2e25;
|
||
border: 2px solid var(--mlp-speaker, #3f6b4a);
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 0 var(--mlp-speaker, #3f6b4a);
|
||
font-family: 'Zen Maru Gothic', 'Nunito', sans-serif;
|
||
|
||
p {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// Konfety ve stylu Spy × Family
|
||
// ============================================
|
||
.confetti-sxf {
|
||
filter: drop-shadow(0 3px 3px rgb(34 48 60 / 0.25));
|
||
}
|
||
|
||
// Štítky jako výstřižky z novin a razítka na spisech — psací stroj, tenký vnitřní lem
|
||
.confetti-sxf-badge {
|
||
padding: 4px 14px;
|
||
border-radius: 4px;
|
||
color: #fffcf5;
|
||
box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.35);
|
||
font-family: 'Courier Prime', 'Courier New', monospace;
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// Nápis „わくわく!" — retro titulek s dvojitou linkou, poskočí radostí jako Anya
|
||
.confetti-sxf-banner {
|
||
position: absolute;
|
||
top: 38%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 12px 44px 16px;
|
||
font-family: 'Playfair Display', Georgia, serif;
|
||
font-weight: 800;
|
||
font-size: clamp(2rem, 7vw, 4.2rem);
|
||
white-space: nowrap;
|
||
color: #fffcf5;
|
||
background:
|
||
linear-gradient(#d9483b, #d9483b) left bottom / 100% 5px no-repeat,
|
||
linear-gradient(#f7f0e1, #f7f0e1) left bottom 8px / 100% 3px no-repeat,
|
||
#1e6f6c;
|
||
border: 3px solid #f7f0e1;
|
||
border-radius: 12px;
|
||
box-shadow: 0 0 0 4px #1e6f6c, 0 14px 30px rgb(34 48 60 / 0.35);
|
||
animation: sxf-banner 2.6s ease both;
|
||
}
|
||
|
||
@keyframes sxf-banner {
|
||
0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
|
||
12% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
|
||
18% { transform: translate(-50%, -58%) scale(1); }
|
||
24% { transform: translate(-50%, -50%) scale(1); }
|
||
30% { transform: translate(-50%, -55%) scale(1); }
|
||
36%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
|
||
100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
|
||
}
|
||
|
||
// Postava s hláškou — zlatá medaile Eden a bublina jako kartička s dvojitou linkou
|
||
.confetti-spyfamily-voice {
|
||
.confetti-mlp-avatar {
|
||
border: 4px solid #e8cc82;
|
||
background: radial-gradient(circle at 40% 35%, #fffcf5, #f2e2b9);
|
||
box-shadow: 0 0 0 3px var(--mlp-speaker, #1e6f6c), 0 4px 10px rgb(0 0 0 / 0.3);
|
||
}
|
||
|
||
.confetti-mlp-bubble {
|
||
background: #fffcf5;
|
||
color: #2b2620;
|
||
border: 2px solid var(--mlp-speaker, #1e6f6c);
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 0 3px #fffcf5, 0 0 0 5px var(--mlp-speaker, #1e6f6c), 0 6px 14px rgb(0 0 0 / 0.25);
|
||
font-family: 'Nunito', sans-serif;
|
||
|
||
p {
|
||
font-weight: 800;
|
||
}
|
||
|
||
small {
|
||
font-family: 'Playfair Display', Georgia, serif;
|
||
font-style: italic;
|
||
}
|
||
}
|
||
}
|