/* ============================================
67 — STYLES
Aesthetic: brainrot, alpha-gen, candy-loud
============================================ */
:root {
/* Brand */
--six: #2c7df5;
--six-deep: #1452b8;
--six-glow: rgba(44, 125, 245, 0.55);
--seven: #ff2a6d;
--seven-deep: #c4185a;
--seven-glow: rgba(255, 42, 109, 0.55);
/* Surface */
--bg: #f4f5fb;
--bg-deep: #e6e9f5;
--ink: #0c0d18;
--ink-soft: #5b5f7a;
--muted: #9aa0b8;
--card: #ffffff;
--line: #ececf3;
/* Accents */
--gold: #ffb800;
--gold-deep: #d99500;
/* Type */
--font-display: 'Archivo Black', 'Arial Black', sans-serif;
--font-loud: 'Bungee', 'Arial Black', sans-serif;
--font-body: 'Space Grotesk', system-ui, sans-serif;
/* Geometry */
--radius-lg: 22px;
--radius-md: 16px;
--radius-sm: 10px;
--shadow-lift: 0 8px 24px rgba(12, 13, 24, 0.10), 0 2px 6px rgba(12, 13, 24, 0.06);
--shadow-press: 0 2px 6px rgba(12, 13, 24, 0.12);
/* Layout */
--nav-h: 82px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bot: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; overscroll-behavior: none; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
user-select: none;
touch-action: manipulation;
}
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
img { display: block; max-width: 100%; -webkit-user-drag: none; }
/* ===== BACKGROUND LAYER ===== */
.bg-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bg-mesh {
position: absolute; inset: 0;
background:
radial-gradient(60% 40% at 18% 12%, rgba(44,125,245,0.18), transparent 60%),
radial-gradient(60% 40% at 82% 18%, rgba(255,42,109,0.18), transparent 60%),
radial-gradient(80% 50% at 50% 100%, rgba(255,184,0,0.10), transparent 70%),
linear-gradient(180deg, #f7f8fd 0%, #ecedf6 100%);
}
.bg-noise {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.05;
mix-blend-mode: multiply;
}
/* ===== APP SHELL ===== */
#app {
position: relative;
height: 100vh;
max-width: 480px;
margin: 0 auto;
padding-top: var(--safe-top);
padding-bottom: calc(var(--nav-h) + var(--safe-bot));
display: flex;
flex-direction: column;
background: var(--bg);
overflow: hidden;
}
/* On wider screens, frame the app like a phone mockup */
@media (min-width: 540px) {
body { background: #0c0d18; }
#app {
height: min(900px, 96vh);
margin: 2vh auto;
border-radius: 36px;
box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 0 8px #1a1c2e, 0 0 0 10px #2a2c44;
}
.navbar {
border-radius: 0 0 30px 30px;
}
}
.screen {
position: absolute;
inset: var(--safe-top) 0 calc(var(--nav-h) + var(--safe-bot)) 0;
padding: 16px 16px 24px;
overflow-y: auto;
overflow-x: hidden;
animation: screenIn 280ms cubic-bezier(.2,.7,.2,1);
}
.screen[hidden] { display: none; }
@keyframes screenIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== TOPBAR ===== */
.topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 4px 4px 16px;
}
.topbar__user {
display: flex; align-items: center; gap: 12px;
min-height: 64px;
padding: 7px 10px 7px 7px;
border-radius: 22px;
background: rgba(255,255,255,0.82);
border: 1px solid var(--line);
box-shadow: var(--shadow-lift);
text-align: left;
}
.topbar__user-btn,
.topbar__coins-btn {
transition: transform 100ms ease, box-shadow 100ms ease;
}
.topbar__user-btn:active,
.topbar__coins-btn:active {
transform: translateY(2px);
box-shadow: var(--shadow-press);
}
.topbar__user .avatar {
width: 52px;
height: 52px;
border-radius: 18px;
font-size: 28px;
}
.avatar {
position: relative; width: 42px; height: 42px;
border-radius: 14px;
background: linear-gradient(135deg, #2c7df5, #ff2a6d);
display: grid; place-items: center;
font-size: 22px;
box-shadow: var(--shadow-lift);
}
.avatar--lg { width: 84px; height: 84px; border-radius: 24px; font-size: 44px; }
.avatar__emoji { line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
.avatar__lvl {
position: absolute; bottom: -4px; right: -4px;
background: var(--gold); color: #fff;
font-family: var(--font-display);
font-size: 9px; letter-spacing: 0.5px;
padding: 2px 5px; border-radius: 6px;
border: 2px solid var(--bg);
}
.topbar__name { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.5px; line-height: 1; }
.topbar__rank { font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 1px; text-transform: uppercase; }
.topbar__coins {
display: inline-flex; align-items: center; gap: 8px;
background: var(--card);
border: 1px solid var(--line);
padding: 13px 16px;
border-radius: 999px;
font-family: var(--font-display);
font-size: 16px;
box-shadow: var(--shadow-lift);
min-height: 52px;
}
.coin-icon { filter: drop-shadow(0 1px 2px rgba(255,184,0,0.6)); }
/* ===== HERO ===== */
.hero {
position: relative;
margin: 4px 0 18px;
min-height: 316px;
overflow: visible;
}
.hero__sparks { position: absolute; inset: 0; pointer-events: none; }
.spark {
position: absolute;
font-size: 18px;
opacity: 0.7;
animation: float 3s ease-in-out infinite;
}
.spark--1 { top: 18%; left: 12%; color: var(--six); animation-delay: 0s; }
.spark--2 { top: 8%; left: 35%; color: var(--gold); animation-delay: 0.5s; }
.spark--3 { top: 22%; right: 14%; color: var(--seven); animation-delay: 1s; }
.spark--4 { top: 40%; left: 6%; color: var(--gold); animation-delay: 1.5s; font-size: 14px; }
.spark--5 { top: 4%; right: 32%; color: var(--six); animation-delay: 2s; font-size: 14px; }
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0); opacity: 0.7; }
50% { transform: translateY(-8px) rotate(15deg); opacity: 1; }
}
.hero__digits {
position: relative;
z-index: 2;
display: flex; align-items: center; justify-content: center; gap: 14px;
padding-top: 10px;
}
.digit-img {
height: 130px;
width: auto;
display: block;
}
.digit-img--six { transform: rotate(-6deg); }
.digit-img--seven { transform: rotate(5deg); }
.hero__or {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 1px;
color: var(--ink);
margin-bottom: 6px;
}
.hero__hands {
position: relative;
z-index: 1;
height: 182px;
display: flex; justify-content: center; align-items: flex-start;
margin-top: -8px;
overflow: visible;
}
.hero__hand {
position: absolute;
width: 216px;
height: auto;
max-width: none;
top: 0;
filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18));
animation: handBob 2.4s ease-in-out infinite;
}
.hero__hand--left { left: 50%; transform: translateX(-116%) rotate(-6deg) scaleX(-1); }
.hero__hand--right { right: 50%; transform: translateX(116%) rotate(6deg); animation-delay: 1.2s; }
@keyframes handBob {
0%, 100% { translate: 0 0; }
50% { translate: 0 -10px; }
}
.hero__tag {
text-align: center;
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 2px;
color: var(--ink);
margin-top: 24px;
}
/* ===== SIDE PICKER ===== */
.side-picker {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 0 0 18px;
}
.side-btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 18px 16px;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 1px;
color: #fff;
border: 2px solid transparent;
box-shadow: var(--shadow-lift), inset 0 -4px 0 rgba(0,0,0,0.18);
transition: transform 100ms ease, box-shadow 100ms ease, filter 120ms ease, border-color 120ms ease;
}
.side-btn:active { transform: translateY(2px); box-shadow: var(--shadow-press); }
.side-btn--six { background: linear-gradient(180deg, #3a8bff, #1e6ae6); }
.side-btn--seven { background: linear-gradient(180deg, #ff3a7a, #d61557); }
.side-btn__icon { font-size: 18px; }
.side-btn:not(.is-selected) { filter: saturate(0.72) brightness(0.94); }
.side-btn.is-selected {
border-color: rgba(255,255,255,0.9);
box-shadow: 0 0 0 4px rgba(255,255,255,0.9), var(--shadow-lift), inset 0 -4px 0 rgba(0,0,0,0.18);
}
.side-btn.is-selected::after {
content: "LOCKED";
position: absolute;
right: 10px;
top: -10px;
padding: 4px 7px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-family: var(--font-display);
font-size: 8px;
letter-spacing: 1px;
}
.side-choice {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: -2px 0 16px;
padding: 10px 12px;
border-radius: 18px;
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow-lift);
}
.side-choice__eyebrow,
.side-choice__hint {
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.side-choice__value {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 15px;
color: #fff;
font-family: var(--font-loud);
font-size: 28px;
line-height: 1;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.16);
}
.side-choice[data-side="6"] .side-choice__value { background: var(--six); }
.side-choice[data-side="7"] .side-choice__value { background: var(--seven); }
/* ===== WAR CARD ===== */
.war-card {
background: var(--card);
border-radius: var(--radius-md);
padding: 14px 16px;
box-shadow: var(--shadow-lift);
border: 1px solid var(--line);
}
.war-card__head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 8px;
}
.war-card__globe { font-size: 22px; }
.war-card__title {
font-family: var(--font-display);
font-size: 14px; letter-spacing: 1.5px;
}
.war-bar {
display: flex; height: 14px;
border-radius: 999px;
overflow: hidden;
background: var(--line);
}
.war-bar__six { background: linear-gradient(90deg, #3a8bff, #5fa3ff); transition: width 600ms cubic-bezier(.2,.7,.2,1); }
.war-bar__seven { background: linear-gradient(90deg, #ff5a92, #ff3a7a); transition: width 600ms cubic-bezier(.2,.7,.2,1); }
.war-card__legend {
display: flex; justify-content: space-between;
margin-top: 6px;
font-size: 12px;
}
.legend-six { color: var(--six); font-weight: 700; }
.legend-seven { color: var(--seven); font-weight: 700; }
.war-card__foot {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 10px;
font-size: 12px;
}
.war-card__foot b, .war-card__foot span:last-child {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.5px;
}
.muted { color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.small { font-size: 11px; }
/* ===== NAVBAR ===== */
.navbar {
position: absolute;
left: 0; right: 0;
bottom: 0;
height: calc(var(--nav-h) + var(--safe-bot));
padding: 9px 18px var(--safe-bot);
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: end;
gap: 8px;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--line);
z-index: 10;
transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
}
body.is-immersive .navbar {
transform: translateY(110%);
opacity: 0;
pointer-events: none;
}
body.is-immersive .screen {
inset: var(--safe-top) 0 0 0;
}
.nav-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; padding: 8px 0;
min-height: 58px;
border-radius: 18px;
color: var(--muted);
transition: color 120ms ease, transform 120ms ease, background 120ms ease;
}
.nav-item.is-active { color: var(--ink); background: rgba(12,13,24,0.05); }
.nav-item.is-active .nav-icon { transform: scale(1.15); }
.nav-icon { font-size: 22px; transition: transform 160ms cubic-bezier(.2,.7,.2,1); filter: grayscale(0.2); }
.nav-item.is-active .nav-icon { filter: none; }
.nav-label { font-family: var(--font-display); font-size: 9px; letter-spacing: 1px; }
.nav-item--battle {
min-height: 74px;
margin-top: -22px;
border-radius: 26px;
color: #fff;
background: linear-gradient(135deg, var(--six), var(--seven));
box-shadow: 0 12px 26px rgba(255,42,109,0.28), 0 10px 24px rgba(44,125,245,0.22), inset 0 -5px 0 rgba(0,0,0,0.18);
transform: translateY(-8px);
}
.nav-item--battle .nav-icon {
font-size: 30px;
filter: none;
}
.nav-item--battle .nav-label { font-size: 10px; }
.nav-item--battle:active { transform: translateY(-5px) scale(0.98); }
/* =====================================================
MATCHING SCREEN
===================================================== */
.matching {
height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 26px;
text-align: center;
}
.matching__title {
font-family: var(--font-display);
font-size: 22px; letter-spacing: 2px;
}
.matching__ring {
position: relative; width: 200px; height: 200px;
display: grid; place-items: center;
}
.ring {
position: absolute; inset: 0;
border-radius: 50%;
border: 3px solid;
animation: pulse 2s ease-out infinite;
}
.ring--1 { border-color: var(--six); animation-delay: 0s; }
.ring--2 { border-color: var(--gold); animation-delay: 0.5s; inset: 18px; }
.ring--3 { border-color: var(--seven); animation-delay: 1s; inset: 36px; }
@keyframes pulse {
0% { transform: scale(0.9); opacity: 0.9; }
100% { transform: scale(1.4); opacity: 0; }
}
.matching__side {
height: 130px;
width: auto;
z-index: 2;
display: block;
}
.matching__status {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 2px;
color: var(--ink-soft);
}
.ghost-btn {
padding: 12px 28px;
border: 1px solid var(--line);
background: var(--card);
border-radius: 999px;
font-family: var(--font-display);
font-size: 12px; letter-spacing: 2px;
color: var(--ink-soft);
}
.primary-btn {
display: block;
width: 100%;
padding: 16px;
border-radius: var(--radius-md);
background: linear-gradient(180deg, #2a2c44, #0c0d18);
color: #fff;
font-family: var(--font-display);
font-size: 16px; letter-spacing: 2px;
margin: 10px 0;
box-shadow: var(--shadow-lift), inset 0 -4px 0 rgba(0,0,0,0.4);
}
.primary-btn:active { transform: translateY(2px); }
/* =====================================================
BATTLE SCREEN
===================================================== */
.screen--battle {
padding: 12px 12px 0;
display: flex; flex-direction: column;
}
.battle__top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
/* When player plays for 7, swap player cards left↔right */
body.is-side-7 .battle__top {
direction: rtl;
}
body.is-side-7 .battle__top > * {
direction: ltr;
}
.battle__player {
display: flex; flex-direction: column;
background: var(--card);
border-radius: var(--radius-md);
padding: 8px 12px;
border: 1px solid var(--line);
box-shadow: var(--shadow-lift);
min-width: 0;
}
/* Color the player card by their ACTUAL side, not their role */
.battle__player[data-side="6"] { border-bottom: 4px solid var(--six); }
.battle__player[data-side="7"] { border-bottom: 4px solid var(--seven); }
.battle__player--me { align-items: flex-start; }
.battle__player--enemy { align-items: flex-end; }
.battle__player[data-side="6"] .battle__player-side { background: var(--six); }
.battle__player[data-side="7"] .battle__player-side { background: var(--seven); }
.battle__player[data-side="6"] .battle__player-score { color: var(--six); }
.battle__player[data-side="7"] .battle__player-score { color: var(--seven); }
.battle__player-head { display: inline-flex; align-items: baseline; gap: 6px; }
.battle__player-name {
font-family: var(--font-display);
font-size: 10px; letter-spacing: 1.5px;
color: var(--muted);
max-width: 80px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.battle__player-side {
height: 28px;
width: auto;
display: inline-block;
vertical-align: middle;
}
.battle__player-score {
font-family: var(--font-display);
font-size: 30px;
line-height: 1;
margin-top: 4px;
letter-spacing: -1px;
}
.battle__timer {
position: relative; width: 78px; height: 78px;
display: grid; place-items: center;
}
.timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring__bg { fill: none; stroke: var(--line); stroke-width: 8; }
.timer-ring__fg {
fill: none; stroke: var(--ink); stroke-width: 8;
stroke-dasharray: 276.46; /* 2*PI*44 */
stroke-dashoffset: 0;
stroke-linecap: round;
transition: stroke-dashoffset 200ms linear, stroke 200ms ease;
}
.timer-ring__num {
position: absolute;
font-family: var(--font-display);
font-size: 26px;
}
.battle__stage {
position: relative;
flex: 1;
background: linear-gradient(180deg, #ffffff, #f1f3fa);
border-radius: var(--radius-lg);
border: 1px solid var(--line);
box-shadow: var(--shadow-lift);
overflow: visible;
margin-bottom: 10px;
min-height: 320px;
}
.vs-bar {
position: absolute; top: 12px; left: 12px; right: 12px;
height: 10px;
display: flex;
background: var(--line);
border-radius: 999px;
overflow: hidden;
z-index: 7;
}
.vs-bar__six { background: linear-gradient(90deg, #1e6ae6, #5fa3ff); transition: width 220ms ease; }
.vs-bar__seven { background: linear-gradient(90deg, #ff5a92, #c4185a); transition: width 220ms ease; }
.battle__hands {
position: absolute;
left: 0; right: 0;
bottom: 0;
top: 0;
height: auto;
pointer-events: none;
overflow: visible;
z-index: 6;
}
.battle__hand {
position: absolute;
width: 58%;
max-width: 280px;
height: auto;
bottom: -6%;
transition: transform 110ms cubic-bezier(.3,1.6,.4,1);
filter: drop-shadow(0 12px 24px rgba(0,0,0,0.22));
transform-origin: 50% 100%;
}
.battle__hand--left {
left: 0%;
transform: translate(-10%, 0) rotate(-4deg) scaleX(-1);
}
.battle__hand--right {
right: 0%;
transform: translate(10%, 0) rotate(-4deg);
}
/* Tap animation: each tap restarts the keyframe via animation-name re-assignment.
Battle-only movement is strictly vertical: the X offset and base rotation stay fixed,
so hands bounce up/down like the SIX SEVEN meme instead of swiping diagonally. */
.battle__hand.is-tap.battle__hand--left { animation: handTapLeft 220ms cubic-bezier(.3,1.6,.4,1); }
.battle__hand.is-tap.battle__hand--right { animation: handTapRight 220ms cubic-bezier(.3,1.6,.4,1); }
@keyframes handTapLeft {
0% { transform: translate(-10%, 0) rotate(-4deg) scaleX(-1); }
40% { transform: translate(-10%, -42px) rotate(-4deg) scaleX(-1); }
100% { transform: translate(-10%, 0) rotate(-4deg) scaleX(-1); }
}
@keyframes handTapRight {
0% { transform: translate(10%, 0) rotate(-4deg); }
40% { transform: translate(10%, -42px) rotate(-4deg); }
100% { transform: translate(10%, 0) rotate(-4deg); }
}
.battle__digit {
position: absolute;
top: 24%; left: 50%;
width: 38%;
max-width: 180px;
height: auto;
transform: translate(-50%, -50%);
z-index: 2;
background: transparent;
pointer-events: none;
transition: transform 90ms cubic-bezier(.3,1.6,.4,1);
}
.battle__digit.is-pop { transform: translate(-50%, -50%) scale(1.18) rotate(-4deg); }
/* Countdown overlay (3-2-1-GO) */
.battle__countdown {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--font-loud);
font-size: 140px;
line-height: 1;
color: var(--ink);
text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff, 0 10px 30px rgba(0,0,0,0.18);
z-index: 50;
pointer-events: none;
background: rgba(255,255,255,0.35);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.battle__countdown.is-pop {
animation: cdPop 700ms cubic-bezier(.2,.7,.2,1);
}
@keyframes cdPop {
0% { transform: scale(0.4); opacity: 0; }
30% { transform: scale(1.15); opacity: 1; }
70% { transform: scale(1); }
100% { transform: scale(0.92); opacity: 0; }
}
/* Particle burst */
.particle {
position: absolute;
width: 8px; height: 8px;
border-radius: 50%;
pointer-events: none;
opacity: 1;
animation: particleFly 650ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes particleFly {
0% { transform: translate(0,0) scale(0.6); opacity: 1; }
100% { transform: translate(var(--dx,0), var(--dy,-60px)) scale(0.3); opacity: 0; }
}
/* Critical urgency in final 3 seconds */
.battle__stage.is-final-rush {
animation: finalRush 600ms ease infinite;
}
@keyframes finalRush {
0%, 100% { box-shadow: var(--shadow-lift), 0 0 0 0 rgba(255,42,109,0.5); }
50% { box-shadow: var(--shadow-lift), 0 0 0 10px rgba(255,42,109,0); }
}
.battle__floaters {
position: absolute; inset: 0;
z-index: 8; pointer-events: none;
overflow: hidden;
}
.floater {
position: absolute;
font-family: var(--font-loud);
font-size: 28px;
letter-spacing: 1px;
animation: floatUp 800ms cubic-bezier(.2,.7,.2,1) forwards;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.floater[data-side="6"] { color: var(--six); }
.floater[data-side="7"] { color: var(--seven); }
@keyframes floatUp {
0% { transform: translateY(0) scale(0.6) rotate(var(--r, -4deg)); opacity: 0; }
20% { opacity: 1; transform: translateY(-10px) scale(1.1) rotate(var(--r, -4deg)); }
100% { transform: translateY(-90px) scale(0.9) rotate(var(--r, -4deg)); opacity: 0; }
}
.tap-zone {
display: block;
width: 100%;
padding: 24px 0;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, #ffd84d, var(--gold));
color: #fff;
font-family: var(--font-loud);
font-size: 22px;
letter-spacing: 4px;
margin-bottom: 12px;
box-shadow: 0 10px 0 var(--gold-deep), 0 14px 28px rgba(217,149,0,0.4);
transition: transform 80ms ease, box-shadow 80ms ease;
text-shadow: 0 2px 0 rgba(0,0,0,0.18);
}
.tap-zone:active {
transform: translateY(6px);
box-shadow: 0 4px 0 var(--gold-deep), 0 8px 14px rgba(217,149,0,0.4);
}
.tap-zone__hint { display: inline-block; }
.tap-zone.is-armed { animation: armedShake 0.45s linear; }
@keyframes armedShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(3px); }
}
/* =====================================================
RESULT SCREEN
===================================================== */
.result {
height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px;
text-align: center;
padding: 20px 8px;
}
.result__verdict {
font-family: var(--font-loud);
font-size: 44px;
letter-spacing: 2px;
}
.result__verdict.is-win { color: var(--gold); text-shadow: 0 6px 0 var(--gold-deep); }
.result__verdict.is-lose { color: var(--ink-soft); text-shadow: 0 6px 0 var(--line); }
.result__verdict.is-tie { color: var(--ink-soft); }
.result__side {
height: 180px;
width: auto;
display: block;
margin: 4px auto;
}
.result__rows {
width: 100%;
background: var(--card);
border-radius: var(--radius-md);
padding: 14px;
border: 1px solid var(--line);
box-shadow: var(--shadow-lift);
margin: 14px 0;
}
.result__row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 8px 0;
border-bottom: 1px dashed var(--line);
}
.result__row:last-child { border-bottom: 0; }
.result__row span { color: var(--ink-soft); font-size: 14px; }
.result__row b { font-family: var(--font-display); font-size: 18px; }
.result__row--reward b { color: var(--gold-deep); }
/* =====================================================
SHOP
===================================================== */
.page-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px;
padding: 4px;
}
.page-head h2 {
font-family: var(--font-loud);
font-size: 26px;
letter-spacing: 2px;
margin: 0;
}
.page-head__coins {
display: inline-flex; align-items: center; gap: 6px;
background: var(--card);
border: 1px solid var(--line);
padding: 8px 14px;
border-radius: 999px;
font-family: var(--font-display);
font-size: 14px;
box-shadow: var(--shadow-lift);
}
.shop-tabs {
display: grid; grid-template-columns: 1fr 1fr;
gap: 8px; margin-bottom: 14px;
}
.shop-tab {
padding: 10px;
border-radius: var(--radius-sm);
background: var(--card);
border: 1px solid var(--line);
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 1.5px;
color: var(--ink-soft);
}
.shop-tab.is-active {
background: var(--ink); color: #fff; border-color: var(--ink);
}
.shop-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.shop-card {
background: var(--card);
border-radius: var(--radius-md);
border: 1px solid var(--line);
box-shadow: var(--shadow-lift);
padding: 12px;
display: flex; flex-direction: column; align-items: center;
position: relative;
overflow: hidden;
}
.shop-card__rarity {
position: absolute; top: 8px; left: 8px;
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 1px;
padding: 3px 7px;
border-radius: 6px;
color: #fff;
}
.shop-card__rarity--common { background: #8b95b3; }
.shop-card__rarity--rare { background: #2c7df5; }
.shop-card__rarity--epic { background: #a23bff; }
.shop-card__rarity--legend { background: linear-gradient(135deg, #ffb800, #ff2a6d); }
.shop-card__img {
width: 110px; height: 110px;
object-fit: contain;
margin: 14px 0 6px;
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}
.shop-card__name {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 1px;
margin-bottom: 8px;
}
.shop-card__cta {
width: 100%;
padding: 8px 0;
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 1px;
color: #fff;
background: var(--ink);
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.shop-card__cta.is-owned { background: var(--line); color: var(--ink-soft); }
.shop-card__cta.is-equipped{ background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; }
.shop-card__cta.is-locked { background: var(--ink-soft); }
.shop-card__digit-preview {
display: flex;
gap: 6px;
align-items: center;
justify-content: center;
height: 110px;
margin: 10px 0;
}
.shop-card__digit-preview img {
height: 90px;
width: auto;
}
/* =====================================================
LEADERBOARD
===================================================== */
.top-prize {
background: linear-gradient(135deg, #fff8e1, #fff);
border: 1px solid #ffe6a3;
border-radius: var(--radius-md);
padding: 14px;
margin-bottom: 14px;
box-shadow: var(--shadow-lift);
}
.top-prize__title {
font-family: var(--font-display);
font-size: 12px; letter-spacing: 2px;
color: var(--gold-deep);
margin-bottom: 8px;
}
.top-prize__items {
display: flex; justify-content: space-between; gap: 8px;
}
.prize {
flex: 1;
background: #fff;
border-radius: var(--radius-sm);
padding: 8px;
text-align: center;
border: 1px solid var(--line);
}
.prize__rank {
display: block;
font-family: var(--font-display);
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 1px;
}
.prize__val {
display: block;
font-family: var(--font-display);
font-size: 12px;
margin-top: 2px;
}
.top-list { display: flex; flex-direction: column; gap: 8px; }
.top-row {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center; gap: 10px;
background: var(--card);
border-radius: var(--radius-sm);
padding: 10px 12px;
border: 1px solid var(--line);
box-shadow: var(--shadow-lift);
}
.top-row.is-me { border: 1px solid var(--ink); background: #fffdf3; }
.top-row__rank {
font-family: var(--font-loud);
font-size: 18px;
color: var(--ink-soft);
}
.top-row__rank.gold { color: var(--gold-deep); }
.top-row__rank.silver { color: #9fa6c0; }
.top-row__rank.bronze { color: #cd7f32; }
.top-row__name {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.5px;
}
.top-row__side {
font-family: var(--font-loud);
font-size: 14px;
margin-right: 6px;
}
.top-row__side[data-side="6"] { color: var(--six); }
.top-row__side[data-side="7"] { color: var(--seven); }
.top-row__score {
font-family: var(--font-display);
font-size: 14px;
}
/* =====================================================
PROFILE
===================================================== */
.profile-card {
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--line);
box-shadow: var(--shadow-lift);
padding: 20px;
display: flex; flex-direction: column; align-items: center;
gap: 8px;
}
.profile-card__name {
font-family: var(--font-loud);
font-size: 26px;
margin-top: 8px;
}
.profile-card__rank {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 2px;
color: var(--gold-deep);
}
.profile-card__stats {
display: grid; grid-template-columns: repeat(3, 1fr);
width: 100%;
margin-top: 14px;
gap: 10px;
}
.stat {
background: var(--bg-deep);
border-radius: var(--radius-sm);
padding: 10px;
text-align: center;
}
.stat b {
font-family: var(--font-display);
font-size: 20px;
display: block;
}
.stat span {
font-size: 10px;
letter-spacing: 1.5px;
color: var(--ink-soft);
}
.profile-side {
margin-top: 18px;
text-align: center;
}
.profile-side__pick {
display: inline-flex; gap: 10px;
margin-top: 8px;
}
.side-pill {
width: 72px; height: 72px;
border-radius: 22px;
font-family: var(--font-loud);
font-size: 38px;
background: var(--card);
border: 2px solid var(--line);
box-shadow: var(--shadow-lift);
transition: transform 120ms ease;
}
.side-pill.is-active[data-side="6"], #profile-pick-6.is-active { color: #fff; background: var(--six); border-color: var(--six-deep); }
.side-pill.is-active[data-side="7"], #profile-pick-7.is-active { color: #fff; background: var(--seven); border-color: var(--seven-deep); }
#profile-pick-6 { color: var(--six); }
#profile-pick-7 { color: var(--seven); }
/* =====================================================
UTIL — toast
===================================================== */
.toast {
position: fixed;
left: 50%; transform: translateX(-50%);
bottom: calc(var(--nav-h) + 20px + var(--safe-bot));
background: var(--ink); color: #fff;
padding: 10px 18px;
border-radius: 999px;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 1px;
box-shadow: var(--shadow-lift);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
}
.toast.is-show {
opacity: 1;
transform: translateX(-50%) translateY(-6px);
}
/* small screens */
@media (max-height: 700px) {
.digit { font-size: 90px; }
.hero { min-height: 284px; }
.hero__hand { width: 192px; }
.hero__hands { height: 154px; }
}
/* =====================================================
YOUTH HYPE REFRESH PATCH
More vivid, meme-first, ADHD-friendly focus cues.
===================================================== */
:root {
--bg: #f6f3ff;
--bg-deep: #ece8ff;
--card: rgba(255,255,255,0.88);
--line: rgba(114, 102, 160, 0.14);
--ink: #111128;
--ink-soft: #5f5a86;
--muted: #8c88b1;
--shadow-lift: 0 14px 34px rgba(63, 33, 124, 0.12), 0 4px 12px rgba(22, 17, 59, 0.08);
--shadow-press: 0 4px 10px rgba(22, 17, 59, 0.14);
}
body {
background:
radial-gradient(1000px 500px at 0% 0%, rgba(113, 82, 255, 0.08), transparent 60%),
radial-gradient(700px 420px at 100% 0%, rgba(255, 42, 109, 0.10), transparent 60%),
var(--bg);
}
.bg-mesh {
background:
radial-gradient(56% 38% at 18% 12%, rgba(44,125,245,0.24), transparent 60%),
radial-gradient(56% 38% at 82% 18%, rgba(255,42,109,0.24), transparent 60%),
radial-gradient(55% 28% at 50% 76%, rgba(163, 59, 255, 0.14), transparent 65%),
radial-gradient(65% 36% at 50% 100%, rgba(255,184,0,0.12), transparent 72%),
linear-gradient(180deg, #f8f7ff 0%, #eeecff 100%);
}
.topbar__user,
.topbar__coins,
.side-choice,
.war-card,
.top-prize,
.top-row,
.profile-card,
.result__rows,
.shop-card,
.battle__player,
.page-head__coins {
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82));
border-color: rgba(130, 114, 187, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.topbar__user {
min-height: 70px;
border-radius: 24px;
}
.topbar__coins {
box-shadow: 0 12px 26px rgba(255,184,0,0.14), var(--shadow-lift);
}
.digit-img {
filter: drop-shadow(0 12px 18px rgba(0,0,0,0.12));
}
.hero {
min-height: 326px;
}
.hero__hands {
height: 190px;
margin-top: -10px;
}
.hero__hand {
width: 232px;
filter: drop-shadow(0 14px 28px rgba(0,0,0,0.20));
}
.hero__hand--left { left: 50%; transform: translateX(-102%) rotate(-6deg) scaleX(-1); }
.hero__hand--right { right: 50%; transform: translateX(102%) rotate(6deg); }
.hero__tag {
margin-top: 22px;
font-size: 14px;
color: #272447;
text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}
.side-btn {
border-radius: 22px;
box-shadow: 0 14px 24px rgba(18,17,40,0.12), inset 0 -5px 0 rgba(0,0,0,0.18);
}
.side-btn--six {
background: linear-gradient(180deg, #4db0ff, #2c7df5);
}
.side-btn--seven {
background: linear-gradient(180deg, #ff5595, #ff2a6d);
}
.side-btn.is-selected {
box-shadow: 0 0 0 5px rgba(255,255,255,0.92), 0 0 0 11px rgba(44,125,245,0.10), 0 18px 30px rgba(18,17,40,0.16), inset 0 -5px 0 rgba(0,0,0,0.18);
}
.side-btn--seven.is-selected {
box-shadow: 0 0 0 5px rgba(255,255,255,0.92), 0 0 0 11px rgba(255,42,109,0.10), 0 18px 30px rgba(18,17,40,0.16), inset 0 -5px 0 rgba(0,0,0,0.18);
}
.side-choice {
gap: 12px;
border-radius: 20px;
}
.side-choice__value {
width: 48px; height: 48px;
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18), 0 10px 18px rgba(18,17,40,0.10);
}
.war-card {
position: relative;
overflow: hidden;
}
.war-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.46) 42%, transparent 64%);
transform: translateX(-120%);
animation: cardShine 5.4s linear infinite;
pointer-events: none;
}
@keyframes cardShine {
100% { transform: translateX(120%); }
}
.navbar {
background: rgba(255,255,255,0.84);
border-top-color: rgba(135, 120, 190, 0.18);
box-shadow: 0 -10px 28px rgba(41, 33, 88, 0.08);
}
.nav-item {
border-radius: 20px;
}
.nav-item.is-active {
background: linear-gradient(180deg, rgba(44,125,245,0.10), rgba(255,42,109,0.08));
}
.nav-item--battle {
min-height: 78px;
border-radius: 28px;
box-shadow: 0 16px 34px rgba(255,42,109,0.34), 0 12px 30px rgba(44,125,245,0.26), inset 0 -6px 0 rgba(0,0,0,0.18);
}
.matching__title,
.page-head h2,
.profile-card__name,
.result__verdict {
text-shadow: 0 4px 18px rgba(63, 33, 124, 0.10);
}
.battle__top {
margin-bottom: 10px;
}
.battle__timer {
filter: drop-shadow(0 8px 16px rgba(63, 33, 124, 0.12));
}
.battle__stage {
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,241,255,0.94));
border-color: rgba(130, 114, 187, 0.14);
box-shadow: 0 22px 42px rgba(63, 33, 124, 0.12), 0 4px 12px rgba(22,17,59,0.06);
min-height: 336px;
}
.battle__ambient {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(40% 32% at 26% 70%, rgba(44,125,245,0.20), transparent 70%),
radial-gradient(40% 32% at 74% 70%, rgba(255,42,109,0.20), transparent 70%),
radial-gradient(36% 22% at 50% 28%, rgba(255,184,0,0.12), transparent 80%);
animation: stageAmbient 4.6s ease-in-out infinite;
z-index: 1;
}
@keyframes stageAmbient {
0%, 100% { transform: scale(1); opacity: 0.90; }
50% { transform: scale(1.03); opacity: 1; }
}
.vs-bar {
top: 10px;
height: 12px;
background: rgba(17,17,40,0.08);
box-shadow: inset 0 1px 2px rgba(17,17,40,0.08);
}
.battle__meme {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 7;
padding: 7px 12px;
border-radius: 999px;
background: rgba(17,17,40,0.88);
color: #fff;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1.8px;
text-align: center;
box-shadow: 0 10px 18px rgba(17,17,40,0.18);
white-space: nowrap;
}
.battle__meme.is-pop {
animation: memePop 320ms cubic-bezier(.2,.7,.2,1);
}
@keyframes memePop {
0% { transform: translateX(-50%) scale(0.92); }
45% { transform: translateX(-50%) scale(1.06); }
100% { transform: translateX(-50%) scale(1); }
}
.battle__combo {
position: absolute;
top: 72px;
left: 50%;
transform: translateX(-50%);
z-index: 9;
padding: 9px 16px;
border-radius: 999px;
background: linear-gradient(135deg, #ffb800, #ff7a00);
color: #fff;
font-family: var(--font-loud);
font-size: 16px;
letter-spacing: 1px;
box-shadow: 0 12px 24px rgba(255,122,0,0.30);
text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.battle__combo.is-pop {
animation: comboBurst 420ms cubic-bezier(.2,.7,.2,1);
}
@keyframes comboBurst {
0% { transform: translateX(-50%) scale(0.70); opacity: 0; }
45% { transform: translateX(-50%) scale(1.10); opacity: 1; }
100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.battle__flash {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
opacity: 0;
}
.battle__flash.is-six {
animation: battleFlashSix 240ms ease-out;
}
.battle__flash.is-seven {
animation: battleFlashSeven 240ms ease-out;
}
.battle__flash.is-big.is-six {
animation: battleFlashSixBig 280ms ease-out;
}
.battle__flash.is-big.is-seven {
animation: battleFlashSevenBig 280ms ease-out;
}
@keyframes battleFlashSix {
0% { opacity: 0; background: radial-gradient(38% 40% at 26% 68%, rgba(44,125,245,0.34), transparent 70%); }
35% { opacity: 1; }
100% { opacity: 0; background: radial-gradient(48% 50% at 26% 68%, rgba(44,125,245,0), transparent 80%); }
}
@keyframes battleFlashSeven {
0% { opacity: 0; background: radial-gradient(38% 40% at 74% 68%, rgba(255,42,109,0.34), transparent 70%); }
35% { opacity: 1; }
100% { opacity: 0; background: radial-gradient(48% 50% at 74% 68%, rgba(255,42,109,0), transparent 80%); }
}
@keyframes battleFlashSixBig {
0% { opacity: 0; background: radial-gradient(42% 46% at 26% 68%, rgba(44,125,245,0.46), transparent 68%); }
45% { opacity: 1; }
100% { opacity: 0; background: radial-gradient(58% 60% at 26% 68%, rgba(44,125,245,0), transparent 80%); }
}
@keyframes battleFlashSevenBig {
0% { opacity: 0; background: radial-gradient(42% 46% at 74% 68%, rgba(255,42,109,0.46), transparent 68%); }
45% { opacity: 1; }
100% { opacity: 0; background: radial-gradient(58% 60% at 74% 68%, rgba(255,42,109,0), transparent 80%); }
}
.battle__hands {
z-index: 6;
}
.battle__hand {
width: 60%;
max-width: 300px;
bottom: -5%;
filter: drop-shadow(0 16px 28px rgba(0,0,0,0.24));
}
.battle__digit {
top: 26%;
width: 40%;
filter: drop-shadow(0 14px 18px rgba(0,0,0,0.12));
}
.battle__digit.is-pop {
transform: translate(-50%, -50%) scale(1.22) rotate(-4deg);
}
.battle__floaters {
z-index: 8;
}
.floater {
font-size: 30px;
}
.tap-zone {
background: linear-gradient(180deg, #ffe56a, #ffb800);
box-shadow: 0 10px 0 var(--gold-deep), 0 16px 34px rgba(255,184,0,0.42);
}
.tap-zone.is-live {
animation: tapZonePulse 1s ease-in-out infinite;
}
@keyframes tapZonePulse {
0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 10px 0 var(--gold-deep), 0 16px 34px rgba(255,184,0,0.42); }
50% { transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 0 var(--gold-deep), 0 20px 40px rgba(255,184,0,0.52); }
}
.tap-zone__hint {
position: relative;
z-index: 1;
}
.battle__stage.is-final-rush {
animation: finalRush 520ms ease infinite;
}
@keyframes finalRush {
0%, 100% { box-shadow: 0 22px 42px rgba(63, 33, 124, 0.12), 0 0 0 0 rgba(255,42,109,0.45); }
50% { box-shadow: 0 22px 42px rgba(63, 33, 124, 0.12), 0 0 0 14px rgba(255,42,109,0); }
}
.shop-card__cta,
.primary-btn,
.ghost-btn,
.side-pill {
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.shop-card__cta:hover,
.primary-btn:hover,
.ghost-btn:hover,
.side-pill:hover {
filter: brightness(1.02);
}
@media (max-height: 700px) {
.hero { min-height: 294px; }
.hero__hand { width: 204px; }
.hero__hands { height: 162px; }
.battle__meme { font-size: 9px; top: 26px; }
.battle__combo { top: 68px; font-size: 14px; }
}
/* =====================================================
6.7 SECOND BRAINROT BATTLE PATCH
Shorter countdown, shorter rounds, more nonstop chaos.
===================================================== */
.timer-ring__num {
font-size: 22px;
letter-spacing: -0.5px;
}
.battle__meme {
top: 30px;
background: linear-gradient(135deg, rgba(17,17,40,0.92), rgba(63,33,124,0.92));
box-shadow: 0 12px 22px rgba(17,17,40,0.20), 0 0 0 2px rgba(255,255,255,0.08);
}
.battle__countdown {
font-size: clamp(84px, 16vw, 136px);
letter-spacing: 2px;
color: #fff;
background: rgba(255,255,255,0.22);
text-shadow:
-3px -3px 0 rgba(17,17,40,0.92),
3px -3px 0 rgba(17,17,40,0.92),
-3px 3px 0 rgba(17,17,40,0.92),
3px 3px 0 rgba(17,17,40,0.92),
0 14px 36px rgba(63,33,124,0.26);
animation-timing-function: cubic-bezier(.2,.85,.2,1);
}
.battle__countdown--wide {
font-size: clamp(54px, 10.5vw, 94px);
letter-spacing: 1px;
white-space: nowrap;
}
.battle__countdown.is-pop {
animation: cdPopWide 520ms cubic-bezier(.2,.85,.2,1);
}
@keyframes cdPopWide {
0% { transform: scale(0.58) rotate(-4deg); opacity: 0; }
25% { transform: scale(1.12) rotate(2deg); opacity: 1; }
70% { transform: scale(1) rotate(-1deg); opacity: 1; }
100% { transform: scale(0.94) rotate(0deg); opacity: 0; }
}
.battle__combo {
top: 78px;
box-shadow: 0 14px 26px rgba(255,122,0,0.36), 0 0 0 4px rgba(255,255,255,0.28);
}
.battle__floaters {
overflow: hidden;
}
.chaos-sticker {
position: absolute;
z-index: 10;
padding: 8px 12px;
border-radius: 16px;
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 1px;
line-height: 1;
color: #fff;
box-shadow: 0 12px 20px rgba(17,17,40,0.18);
text-shadow: 0 2px 0 rgba(0,0,0,0.15);
animation: stickerBurst 780ms cubic-bezier(.18,.78,.22,1) forwards;
pointer-events: none;
}
.chaos-sticker[data-side="6"] {
background: linear-gradient(135deg, #43a9ff, #2c7df5);
}
.chaos-sticker[data-side="7"] {
background: linear-gradient(135deg, #ff5e9b, #ff2a6d);
}
@keyframes stickerBurst {
0% { transform: translate(-50%, 0) scale(0.66) rotate(var(--rot, 0deg)); opacity: 0; }
18% { transform: translate(-50%, -10px) scale(1.08) rotate(var(--rot, 0deg)); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx, 0px)), var(--ty, -80px)) scale(0.9) rotate(var(--rot, 0deg)); opacity: 0; }
}
.confetti-piece {
position: absolute;
width: 10px;
height: 18px;
border-radius: 4px;
z-index: 9;
pointer-events: none;
animation: confettiFall var(--fall-dur, 1.2s) linear forwards;
opacity: 0.92;
}
.confetti-piece[data-side="6"] {
background: linear-gradient(180deg, #7ed6ff, #2c7df5);
}
.confetti-piece[data-side="7"] {
background: linear-gradient(180deg, #ff9bc2, #ff2a6d);
}
@keyframes confettiFall {
0% { transform: translate(0, -10px) rotate(0deg) scale(0.85); opacity: 0; }
15% { opacity: 0.95; }
100% { transform: translate(var(--fall-x, 0px), 380px) rotate(var(--fall-r, 120deg)) scale(1.05); opacity: 0; }
}
.particle {
width: 9px;
height: 9px;
box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}
.tap-zone {
position: relative;
overflow: hidden;
}
.tap-zone::before,
.tap-zone::after {
content: '';
position: absolute;
inset: auto;
pointer-events: none;
}
.tap-zone::before {
top: -30%;
left: -12%;
width: 42%;
height: 180%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.34), rgba(255,255,255,0));
transform: rotate(18deg);
animation: tapSheen 1.1s linear infinite;
}
.tap-zone::after {
inset: 0;
background:
radial-gradient(circle at 14% 30%, rgba(255,255,255,0.16), transparent 20%),
radial-gradient(circle at 82% 62%, rgba(255,255,255,0.16), transparent 22%),
radial-gradient(circle at 52% 22%, rgba(255,255,255,0.12), transparent 18%);
opacity: 0.9;
}
@keyframes tapSheen {
0% { transform: translateX(-30%) rotate(18deg); opacity: 0; }
35% { opacity: 1; }
100% { transform: translateX(290%) rotate(18deg); opacity: 0; }
}
.battle__stage.is-final-rush .battle__ambient {
animation-duration: 1.1s;
filter: saturate(1.2);
}
@media (max-height: 700px) {
.timer-ring__num { font-size: 20px; }
.battle__countdown--wide { font-size: clamp(46px, 9vw, 78px); }
.battle__combo { top: 72px; }
.chaos-sticker { font-size: 12px; }
}
/* =====================================================
MAY-2026 GEN ALPHA PHRASE STORM PATCH
More flying meme phrases during the 6.7s battle.
===================================================== */
.chaos-sticker {
max-width: 72%;
text-align: center;
white-space: nowrap;
will-change: transform, opacity;
}
.chaos-sticker--mega {
font-size: 18px;
padding: 10px 15px;
border-radius: 20px;
z-index: 12;
box-shadow: 0 16px 28px rgba(17,17,40,0.24), 0 0 0 4px rgba(255,255,255,0.26);
animation-duration: 900ms;
}
.chaos-sticker--rain {
font-size: 12px;
padding: 7px 10px;
z-index: 11;
animation: phraseRain 1120ms cubic-bezier(.16,.74,.24,1) forwards;
}
@keyframes phraseRain {
0% { transform: translate(-50%, 0) scale(0.72) rotate(var(--rot, 0deg)); opacity: 0; }
12% { transform: translate(-50%, 18px) scale(1.04) rotate(var(--rot, 0deg)); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx, 0px)), var(--ty, 320px)) scale(0.82) rotate(calc(var(--rot, 0deg) * -1)); opacity: 0; }
}
@media (max-width: 360px) {
.chaos-sticker { font-size: 12px; }
.chaos-sticker--mega { font-size: 15px; }
.chaos-sticker--rain { font-size: 11px; }
}
/* =====================================================
67 EXACT SCORE JACKPOT
Triggered when the player finishes a battle with exactly 67 points.
===================================================== */
.sixty-seven-jackpot {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
overflow: hidden;
pointer-events: none;
background:
radial-gradient(circle at 20% 18%, rgba(44,125,245,0.98), transparent 34%),
radial-gradient(circle at 82% 22%, rgba(255,42,109,0.98), transparent 36%),
radial-gradient(circle at 50% 82%, rgba(255,184,0,0.95), transparent 42%),
linear-gradient(135deg, #2c7df5 0%, #8f3bff 44%, #ff2a6d 100%);
animation: jackpotSlam 320ms cubic-bezier(.12,.9,.18,1), jackpotBgPulse 460ms steps(2,end) infinite;
}
.sixty-seven-jackpot::before,
.sixty-seven-jackpot::after {
content: '';
position: absolute;
inset: -18%;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 10px, transparent 10px 26px),
radial-gradient(circle, rgba(255,255,255,0.38) 0 2px, transparent 3px);
background-size: auto, 34px 34px;
mix-blend-mode: screen;
animation: jackpotSpin 2.2s linear infinite;
}
.sixty-seven-jackpot::after {
animation-direction: reverse;
opacity: 0.55;
transform: scale(1.2);
}
.sixty-seven-jackpot.is-out {
animation: jackpotOut 520ms cubic-bezier(.3,.7,.2,1) forwards;
}
.sixty-seven-jackpot__badge,
.sixty-seven-jackpot__line,
.sixty-seven-jackpot__sub {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #fff;
font-family: var(--font-loud);
text-transform: uppercase;
text-shadow:
-3px -3px 0 #111128,
3px -3px 0 #111128,
-3px 3px 0 #111128,
3px 3px 0 #111128,
0 12px 28px rgba(0,0,0,0.35);
}
.sixty-seven-jackpot__badge {
top: 12%;
padding: 10px 16px;
border-radius: 999px;
font-size: clamp(15px, 4vw, 24px);
letter-spacing: 2px;
background: rgba(17,17,40,0.86);
box-shadow: 0 10px 28px rgba(0,0,0,0.26), 0 0 0 4px rgba(255,255,255,0.24);
animation: jackpotBadge 700ms cubic-bezier(.15,.9,.18,1) both;
}
.sixty-seven-jackpot__line {
width: min(106vw, 620px);
font-size: clamp(45px, 13vw, 92px);
line-height: 0.92;
letter-spacing: -2px;
-webkit-text-stroke: 2px #111128;
}
.sixty-seven-jackpot__line--one {
top: 31%;
animation: jackpotLineOne 860ms cubic-bezier(.12,.9,.18,1) both;
}
.sixty-seven-jackpot__line--two {
top: 49%;
animation: jackpotLineTwo 860ms cubic-bezier(.12,.9,.18,1) 90ms both;
}
.sixty-seven-jackpot__sub {
bottom: 16%;
width: min(90vw, 520px);
padding: 12px 16px;
border-radius: 22px;
font-size: clamp(14px, 4.2vw, 25px);
letter-spacing: 1px;
background: linear-gradient(135deg, rgba(255,184,0,0.94), rgba(255,122,0,0.94));
box-shadow: 0 14px 30px rgba(217,149,0,0.34), 0 0 0 4px rgba(255,255,255,0.22);
animation: jackpotSub 720ms cubic-bezier(.12,.9,.18,1) 240ms both;
}
.sixty-seven-jackpot__confetti {
position: absolute;
width: 12px;
height: 24px;
border-radius: 5px;
opacity: 0;
animation: jackpotConfetti var(--dur, 1.6s) linear forwards;
}
.sixty-seven-jackpot__confetti[data-side="6"] {
background: linear-gradient(180deg, #b6e8ff, #2c7df5);
}
.sixty-seven-jackpot__confetti[data-side="7"] {
background: linear-gradient(180deg, #ffd0e2, #ff2a6d);
}
.sixty-seven-jackpot__word {
position: absolute;
z-index: 2;
padding: 8px 12px;
border-radius: 16px;
color: #fff;
font-family: var(--font-display);
font-size: clamp(13px, 3.5vw, 22px);
letter-spacing: 1px;
white-space: nowrap;
text-shadow: 0 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 12px 24px rgba(17,17,40,0.22);
opacity: 0;
animation: jackpotWord 1150ms cubic-bezier(.16,.88,.22,1) forwards;
}
.sixty-seven-jackpot__word[data-side="6"] {
background: linear-gradient(135deg, #43a9ff, #2c7df5);
}
.sixty-seven-jackpot__word[data-side="7"] {
background: linear-gradient(135deg, #ff5e9b, #ff2a6d);
}
@keyframes jackpotSlam {
from { transform: scale(1.18); opacity: 0; filter: saturate(1.6) brightness(1.4); }
to { transform: scale(1); opacity: 1; filter: saturate(1.25) brightness(1.04); }
}
@keyframes jackpotOut {
to { transform: scale(1.08); opacity: 0; filter: blur(10px) saturate(1.8); }
}
@keyframes jackpotBgPulse {
0%, 100% { filter: hue-rotate(0deg) saturate(1.25); }
50% { filter: hue-rotate(18deg) saturate(1.65); }
}
@keyframes jackpotSpin {
from { transform: rotate(0deg) scale(1.12); }
to { transform: rotate(360deg) scale(1.12); }
}
@keyframes jackpotBadge {
0% { transform: translateX(-50%) translateY(-70px) scale(0.65) rotate(-6deg); opacity: 0; }
60% { transform: translateX(-50%) translateY(8px) scale(1.08) rotate(2deg); opacity: 1; }
100% { transform: translateX(-50%) translateY(0) scale(1) rotate(0); opacity: 1; }
}
@keyframes jackpotLineOne {
0% { transform: translateX(-50%) translateX(-120vw) rotate(-10deg) scale(0.85); opacity: 0; }
54% { transform: translateX(-50%) translateX(4vw) rotate(2deg) scale(1.08); opacity: 1; }
100% { transform: translateX(-50%) translateX(0) rotate(-1deg) scale(1); opacity: 1; }
}
@keyframes jackpotLineTwo {
0% { transform: translateX(-50%) translateX(120vw) rotate(10deg) scale(0.85); opacity: 0; }
54% { transform: translateX(-50%) translateX(-4vw) rotate(-2deg) scale(1.08); opacity: 1; }
100% { transform: translateX(-50%) translateX(0) rotate(1deg) scale(1); opacity: 1; }
}
@keyframes jackpotSub {
0% { transform: translateX(-50%) translateY(70px) scale(0.7); opacity: 0; }
70% { transform: translateX(-50%) translateY(-8px) scale(1.06); opacity: 1; }
100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes jackpotConfetti {
0% { transform: translate(0, -20px) rotate(0deg) scale(0.6); opacity: 0; }
8% { opacity: 1; }
100% { transform: translate(var(--dx, 0px), 118vh) rotate(var(--rot, 360deg)) scale(1.08); opacity: 0; }
}
@keyframes jackpotWord {
0% { transform: translate(-50%, 0) scale(0.55) rotate(var(--rot, 0deg)); opacity: 0; }
18% { transform: translate(-50%, -12px) scale(1.1) rotate(var(--rot, 0deg)); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx, 0px)), var(--ty, -80px)) scale(0.92) rotate(var(--rot, 0deg)); opacity: 0; }
}
@media (max-height: 700px) {
.sixty-seven-jackpot__badge { top: 9%; }
.sixty-seven-jackpot__line--one { top: 29%; }
.sixty-seven-jackpot__line--two { top: 48%; }
.sixty-seven-jackpot__sub { bottom: 12%; }
}
/* =====================================================
v0.1.2 — TELEGRAM SOCIAL SHAME LOOP
Challenge links, chat war, result share cards.
===================================================== */
.daily-curse {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: -4px 0 12px;
padding: 10px 12px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(17,17,40,0.94), rgba(72,34,145,0.92));
color: #fff;
box-shadow: 0 14px 28px rgba(63,33,124,0.18);
overflow: hidden;
position: relative;
}
.daily-curse::after {
content: '';
position: absolute;
inset: -50% -20%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
transform: rotate(16deg) translateX(-70%);
animation: socialShine 4s linear infinite;
}
.daily-curse__label {
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 1.2px;
color: rgba(255,255,255,0.62);
white-space: nowrap;
position: relative;
z-index: 1;
}
.daily-curse b {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 1px;
text-align: right;
position: relative;
z-index: 1;
}
@keyframes socialShine {
100% { transform: rotate(16deg) translateX(70%); }
}
.challenge-card {
margin: 0 0 12px;
padding: 14px;
border-radius: 22px;
background:
radial-gradient(80% 90% at 0% 0%, rgba(44,125,245,0.22), transparent 62%),
radial-gradient(80% 90% at 100% 0%, rgba(255,42,109,0.24), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84));
border: 1px solid rgba(130,114,187,0.16);
box-shadow: var(--shadow-lift), 0 0 0 5px rgba(255,184,0,0.08);
text-align: center;
animation: challengePulse 1.4s ease-in-out infinite;
}
.challenge-card[hidden] { display: none; }
.challenge-card__eyebrow {
font-family: var(--font-display);
font-size: 9px;
color: var(--seven);
letter-spacing: 1.6px;
}
.challenge-card__title {
margin-top: 4px;
font-family: var(--font-loud);
font-size: 20px;
letter-spacing: 1px;
color: var(--ink);
}
.challenge-card__meta {
margin-top: 4px;
color: var(--ink-soft);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.4px;
}
.challenge-card__cta {
margin-top: 10px;
width: 100%;
padding: 12px 14px;
border-radius: 16px;
color: #fff;
background: linear-gradient(135deg, var(--six), var(--seven));
box-shadow: 0 9px 0 rgba(17,17,40,0.18), 0 15px 28px rgba(255,42,109,0.22);
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 1.4px;
}
@keyframes challengePulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.chat-war-card {
margin: 0 0 14px;
padding: 12px;
border-radius: 20px;
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82));
border: 1px solid rgba(130,114,187,0.14);
box-shadow: var(--shadow-lift);
}
.chat-war-card__top,
.chat-war-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.chat-war-card__label {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1.4px;
color: var(--ink-soft);
}
.chat-war-card__verdict {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1px;
color: var(--seven);
}
.chat-war-card__bar {
display: flex;
height: 16px;
border-radius: 999px;
overflow: hidden;
background: rgba(17,17,40,0.08);
margin: 9px 0 7px;
box-shadow: inset 0 2px 4px rgba(17,17,40,0.08);
}
.chat-war-card__six,
.chat-war-card__seven {
transition: width 360ms cubic-bezier(.2,.7,.2,1);
}
.chat-war-card__six { background: linear-gradient(90deg, #2c7df5, #7ed6ff); }
.chat-war-card__seven { background: linear-gradient(90deg, #ff5e9b, #ff2a6d); }
.chat-war-card__foot {
font-family: var(--font-display);
font-size: 10px;
color: var(--ink-soft);
}
.result-share-card {
width: 100%;
border-radius: 26px;
padding: 18px 14px;
margin: 4px 0 12px;
color: #fff;
background:
radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.20), transparent 45%),
linear-gradient(135deg, #2c7df5, #ff2a6d);
box-shadow: 0 20px 40px rgba(255,42,109,0.24), 0 14px 34px rgba(44,125,245,0.20);
text-align: center;
position: relative;
overflow: hidden;
}
.result-share-card::before {
content: '6 7 6 7 6 7 6 7';
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--font-loud);
font-size: 46px;
letter-spacing: 12px;
color: rgba(255,255,255,0.08);
transform: rotate(-8deg);
pointer-events: none;
}
.result-share-card[data-side="6"] {
background:
radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.22), transparent 45%),
linear-gradient(135deg, #1885ff, #5b3dff);
}
.result-share-card[data-side="7"] {
background:
radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.22), transparent 45%),
linear-gradient(135deg, #ff2a6d, #a23bff);
}
.result-share-card__eyebrow,
.result-share-card__title,
.result-share-card__score,
.result-share-card__caption {
position: relative;
z-index: 1;
}
.result-share-card__eyebrow {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 2px;
opacity: 0.78;
}
.result-share-card__title {
margin-top: 5px;
font-family: var(--font-loud);
font-size: 27px;
line-height: 1;
letter-spacing: 1px;
text-shadow: 0 4px 0 rgba(0,0,0,0.16);
}
.result-share-card__score {
margin-top: 8px;
font-family: var(--font-loud);
font-size: 42px;
line-height: 1;
text-shadow: 0 5px 0 rgba(0,0,0,0.16);
}
.result-share-card__caption {
margin-top: 6px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1.5px;
opacity: 0.88;
}
.challenge-status {
width: 100%;
margin: -2px 0 12px;
padding: 10px 12px;
border-radius: 16px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 1px;
text-align: center;
color: #fff;
box-shadow: var(--shadow-lift);
}
.challenge-status[hidden] { display: none; }
.challenge-status[data-status="win"] { background: linear-gradient(135deg, var(--six), #23c77a); }
.challenge-status[data-status="lose"] { background: linear-gradient(135deg, var(--seven), #ff7a00); }
.social-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.social-btn {
min-height: 48px;
padding: 9px 10px;
border-radius: 16px;
color: #fff;
background: linear-gradient(180deg, #2a2c44, #111128);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1px;
box-shadow: 0 8px 0 rgba(17,17,40,0.30), 0 14px 24px rgba(17,17,40,0.16);
transition: transform 90ms ease, box-shadow 90ms ease, filter 120ms ease;
}
.social-btn--shame {
background: linear-gradient(135deg, #ffb800, #ff2a6d);
box-shadow: 0 8px 0 rgba(172,61,27,0.38), 0 14px 24px rgba(255,42,109,0.18);
}
.social-btn:active {
transform: translateY(5px);
box-shadow: 0 3px 0 rgba(17,17,40,0.28), 0 8px 14px rgba(17,17,40,0.12);
}
@media (max-height: 760px) {
.daily-curse,
.chat-war-card,
.challenge-card { margin-bottom: 8px; }
.result-share-card { padding: 14px 12px; }
.result-share-card__title { font-size: 22px; }
.result-share-card__score { font-size: 34px; }
.social-btn { min-height: 42px; font-size: 9px; }
}
/* =====================================================
v0.1.3 — IDIOT-PROOF HOME + SIMPLE NAV
Less menu-thinking, one obvious action, obvious shop.
===================================================== */
:root {
--nav-h: 88px;
}
.screen--home {
padding: 12px 14px 20px;
}
.screen--home .topbar {
padding: 2px 2px 8px;
gap: 8px;
}
.topbar__user {
min-height: 58px;
padding: 6px 9px 6px 6px;
gap: 9px;
border-radius: 20px;
}
.topbar__user .avatar {
width: 46px;
height: 46px;
border-radius: 16px;
font-size: 24px;
}
.topbar__name {
font-size: 15px;
}
.topbar__rank {
font-size: 10px;
}
.topbar__shop-btn {
min-height: 58px;
padding: 8px 11px;
border-radius: 20px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: linear-gradient(180deg, #fff, #fff7df);
border-color: rgba(255,184,0,0.26);
box-shadow: 0 12px 26px rgba(255,184,0,0.18), var(--shadow-lift);
}
.topbar__shop-icon {
font-size: 21px;
line-height: 1;
}
.topbar__shop-text {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 1px;
line-height: 1;
color: var(--ink);
}
.topbar__coin-wrap {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--font-display);
font-size: 10px;
color: var(--gold-deep);
line-height: 1;
}
.screen--home .hero {
min-height: 380px; /* was 340 — room for taller digits (+25%) and hands */
margin: 0 0 10px;
}
.screen--home .hero__digits {
padding-top: 0;
margin-bottom: 8px;
}
.screen--home .digit-img {
height: 180px; /* was 144 → +25% (user request) */
max-width: 48vw; /* was 38vw — room for wider digit; OR still safe */
object-fit: contain;
}
.screen--home .hero__or {
font-size: 26px;
letter-spacing: 2px;
}
.screen--home .hero__hands {
height: 196px; /* was 176 — room for full hand silhouette */
margin-top: 4px;
overflow: visible; /* hands must never be cropped */
}
.screen--home .hero__hand {
width: 226px;
transition: filter 180ms ease;
}
.screen--home .hero__hand.is-skin-swap {
animation: heroSkinSwap 520ms cubic-bezier(.2,.9,.2,1);
}
@keyframes heroSkinSwap {
0% { opacity: 0.72; translate: 0 0; scale: 1; filter: brightness(1.4) saturate(1.4) drop-shadow(0 14px 28px rgba(0,0,0,0.20)); }
38% { opacity: 1; translate: 0 -10px; scale: 1.055; }
100% { opacity: 1; translate: 0 0; scale: 1; }
}
.screen--home .hero__tag {
margin-top: 16px;
font-size: 12px;
opacity: 0.8;
}
.side-picker {
gap: 10px;
margin-bottom: 10px;
}
.side-btn {
padding: 15px 12px;
border-radius: 22px;
font-size: 17px;
}
.side-btn.is-selected::after {
content: "YOU";
top: -9px;
right: 9px;
}
.side-choice {
margin: 0 0 10px;
padding: 8px 10px;
border-radius: 18px;
}
.side-choice__eyebrow {
display: none;
}
.side-choice__value {
width: 42px;
height: 42px;
font-size: 27px;
}
.side-choice__hint {
font-size: 11px;
color: var(--ink-soft);
}
.side-choice__hint::before {
content: "YOU ARE ";
color: var(--muted);
}
.home-battle-cta {
position: relative;
display: grid;
place-items: center;
width: 100%;
min-height: 92px;
margin: 6px 0 12px;
padding: 14px;
border-radius: 30px;
color: #fff;
overflow: hidden;
background: linear-gradient(135deg, var(--six), var(--seven));
box-shadow: 0 16px 0 rgba(17,17,40,0.20), 0 24px 40px rgba(63,33,124,0.20);
transform: translateZ(0);
}
.home-battle-cta::before {
content: '';
position: absolute;
inset: -30%;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.42), transparent 18%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.34), transparent 20%),
linear-gradient(115deg, transparent 24%, rgba(255,255,255,0.32) 45%, transparent 64%);
animation: homeFightShine 1.6s linear infinite;
}
.home-battle-cta::after {
content: '👇 TAP HERE 👇';
position: absolute;
right: 12px;
top: 10px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(17,17,40,0.70);
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 1px;
}
@keyframes homeFightShine {
0% { transform: translateX(-22%) rotate(0deg); }
100% { transform: translateX(22%) rotate(0deg); }
}
.home-battle-cta:active {
transform: translateY(6px);
box-shadow: 0 8px 0 rgba(17,17,40,0.22), 0 14px 26px rgba(63,33,124,0.20);
}
.home-battle-cta__mini,
.home-battle-cta__main,
.home-battle-cta__sub {
position: relative;
z-index: 1;
pointer-events: none;
}
.home-battle-cta__mini {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 2px;
opacity: 0.86;
}
.home-battle-cta__main {
font-family: var(--font-loud);
font-size: clamp(27px, 8vw, 38px);
line-height: 1;
letter-spacing: 1px;
text-shadow: 0 4px 0 rgba(0,0,0,0.18);
}
.home-battle-cta__main b {
font-size: 1.15em;
}
.home-battle-cta[data-side="6"] {
background: linear-gradient(135deg, #2693ff, #594bff 56%, #ff2a6d);
}
.home-battle-cta[data-side="7"] {
background: linear-gradient(135deg, #ff2a6d, #a23bff 56%, #2693ff);
}
.home-battle-cta__sub {
margin-top: 3px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1.4px;
opacity: 0.92;
}
/* Keep social context, but no dashboard overload on the first screen. */
.screen--home .war-card {
display: none;
}
.daily-curse {
margin: 8px 0;
padding: 10px 12px;
border-radius: 18px;
}
.daily-curse__label {
font-size: 9px;
}
.daily-curse b {
font-size: 13px;
line-height: 1.1;
}
.chat-war-card {
margin: 8px 0 4px;
padding: 10px 12px;
border-radius: 18px;
}
.chat-war-card__label,
.chat-war-card__verdict {
font-size: 10px;
}
.chat-war-card__bar {
height: 10px;
margin-top: 8px;
}
.chat-war-card__foot {
margin-top: 6px;
font-size: 11px;
}
.challenge-card {
border-radius: 20px;
}
.challenge-card__title {
font-size: 18px;
}
.navbar {
grid-template-columns: 1fr 1.25fr 1fr;
padding: 8px 14px var(--safe-bot);
}
.nav-label {
font-size: 10px;
}
.nav-item--battle {
min-height: 80px;
border-radius: 30px;
}
.nav-item--shop.is-active {
color: var(--gold-deep);
background: rgba(255,184,0,0.12);
}
.nav-item--shop .nav-icon {
filter: none;
}
/* Result actions: one obvious shame button, secondary options quieter. */
.social-actions {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.social-btn--shame {
grid-column: 1 / -1;
min-height: 56px;
font-size: 15px;
}
.social-btn:not(.social-btn--shame) {
opacity: 0.86;
font-size: 11px;
}
@media (max-height: 700px) {
.screen--home .hero { min-height: 312px; }
.screen--home .digit-img { height: 153px; max-width: 46vw; } /* was 122 → +25% */
.screen--home .hero__hand { width: 198px; }
.screen--home .hero__hands { height: 160px; } /* keeps hands uncropped */
.home-battle-cta { min-height: 82px; }
.home-battle-cta__main { font-size: clamp(24px, 7vw, 32px); }
}
/* =====================================================
v0.1.4 — BOTTOM ROUND COMBO COUNTER
Combo grows downward, stays capped, and sits under the hands layer.
===================================================== */
.battle__combo {
top: auto;
left: 50%;
bottom: 14px;
width: var(--combo-size, 72px);
height: var(--combo-size, 72px);
min-width: 0;
padding: 0;
border-radius: 50%;
transform: translateX(-50%);
z-index: 5;
display: grid;
place-items: center;
align-content: center;
gap: 0;
background:
radial-gradient(circle at 32% 24%, rgba(255,255,255,0.72), transparent 26%),
linear-gradient(145deg, #ffe96a, #ffb800 48%, #ff7a00);
border: 3px solid rgba(255,255,255,0.82);
box-shadow:
0 14px 26px rgba(255,122,0,0.32),
0 0 0 6px rgba(255,184,0,0.16),
inset 0 -8px 0 rgba(0,0,0,0.14);
color: #fff;
text-align: center;
overflow: hidden;
pointer-events: none;
text-shadow: 0 2px 0 rgba(0,0,0,0.18);
}
.battle__combo::before {
content: '';
position: absolute;
inset: -18%;
border-radius: inherit;
background: conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,0.42), rgba(255,255,255,0));
animation: comboSpin 1.2s linear infinite;
opacity: 0.55;
}
.battle__combo::after {
content: '';
position: absolute;
inset: 10px;
border-radius: inherit;
border: 1px dashed rgba(255,255,255,0.52);
animation: comboSpin 1.8s linear reverse infinite;
}
.battle__combo-kicker,
.battle__combo-num {
position: relative;
z-index: 1;
display: block;
width: 100%;
line-height: 0.92;
}
.battle__combo-kicker {
font-family: var(--font-display);
font-size: clamp(8px, calc(var(--combo-size, 72px) * 0.12), 13px);
letter-spacing: 0.8px;
opacity: 0.96;
}
.battle__combo-num {
font-family: var(--font-loud);
font-size: var(--combo-num-size, 21px);
letter-spacing: -0.5px;
}
.battle__combo.is-hot {
background:
radial-gradient(circle at 32% 24%, rgba(255,255,255,0.76), transparent 26%),
linear-gradient(145deg, #ffed4d, #ff7a00 45%, #ff2a6d);
box-shadow:
0 16px 30px rgba(255,42,109,0.30),
0 0 0 7px rgba(255,42,109,0.14),
inset 0 -8px 0 rgba(0,0,0,0.14);
}
.battle__combo.is-mega {
background:
radial-gradient(circle at 32% 24%, rgba(255,255,255,0.78), transparent 26%),
linear-gradient(145deg, #8ce6ff, #a23bff 46%, #ff2a6d);
box-shadow:
0 18px 34px rgba(162,59,255,0.32),
0 0 0 8px rgba(162,59,255,0.13),
inset 0 -8px 0 rgba(0,0,0,0.16);
}
.battle__combo.is-pop {
animation: comboBubblePop 360ms cubic-bezier(.18,.9,.24,1);
}
@keyframes comboBubblePop {
0% { transform: translateX(-50%) scale(0.68); opacity: 0; }
42% { transform: translateX(-50%) scale(1.16); opacity: 1; }
72% { transform: translateX(-50%) scale(0.96); }
100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
@keyframes comboSpin {
100% { transform: rotate(360deg); }
}
@media (max-height: 700px) {
.battle__combo {
bottom: 10px;
width: min(var(--combo-size, 72px), 104px);
height: min(var(--combo-size, 72px), 104px);
}
}
/* ============================================
0.1.5 — DESIGN POLISH + ANIME SPEEDLINES
============================================ */
/* ----- Home: equipped hands only, no shuffle highlight ----- */
/* The is-skin-swap class is no longer applied at runtime, but we keep the
selector neutralised so that any cached markup doesn't strobe the hand. */
.screen--home .hero__hand.is-skin-swap { animation: none; }
.screen--home .hero {
padding-top: 4px;
}
.screen--home .hero__hands {
filter: drop-shadow(0 18px 32px rgba(28, 22, 70, 0.18));
}
.screen--home .hero__hand {
transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
/* ----- Refined home CTA button ----- */
.home-battle-cta {
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow:
0 18px 36px rgba(255, 42, 109, 0.28),
0 14px 28px rgba(44, 125, 245, 0.22),
inset 0 -6px 0 rgba(0, 0, 0, 0.20);
transition: transform 120ms cubic-bezier(.2,.7,.2,1), box-shadow 160ms ease;
}
.home-battle-cta::before {
content: '';
position: absolute;
inset: -4px;
background: linear-gradient(115deg,
transparent 30%,
rgba(255, 255, 255, 0.42) 48%,
transparent 66%);
transform: translateX(-120%);
animation: ctaShine 3.6s linear infinite;
pointer-events: none;
z-index: 1;
}
.home-battle-cta > * { position: relative; z-index: 2; }
.home-battle-cta:active {
transform: translateY(3px) scale(0.985);
box-shadow:
0 8px 18px rgba(255, 42, 109, 0.22),
0 6px 14px rgba(44, 125, 245, 0.18),
inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
@keyframes ctaShine {
100% { transform: translateX(120%); }
}
/* ----- Side picker: cleaner active state ----- */
.side-btn {
transition: transform 140ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms ease, filter 160ms ease;
}
.side-btn:not(.is-selected) {
filter: saturate(0.78) brightness(0.94);
}
.side-btn.is-selected {
transform: translateY(-1px);
}
/* ----- Topbar polish ----- */
.topbar {
margin-bottom: 14px;
}
.topbar__user-btn,
.topbar__coins-btn {
transition: transform 120ms ease, box-shadow 160ms ease;
}
.topbar__user-btn:active,
.topbar__coins-btn:active {
transform: translateY(2px);
}
.avatar {
box-shadow:
inset 0 -3px 0 rgba(0, 0, 0, 0.12),
0 6px 14px rgba(44, 125, 245, 0.18);
}
/* ----- Shop card improvements for new larger digits ----- */
.shop-card {
transition: transform 140ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms ease;
}
.shop-card:has(.shop-card__cta:not(.is-locked)):active {
transform: translateY(2px);
}
.shop-card__img {
width: 116px;
height: 116px;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.20));
}
.shop-card__digit-preview img {
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}
/* ============================================
BATTLE STAGE: ANIME SPEED LINES
============================================ */
/* The speed-lines layer sits behind the hands but above the ambient gradient.
We draw a starburst of white wedges using a repeating conic gradient and
fade them out toward the centre with a radial mask, then rotate the whole
thing forever. Every tap adds .is-burst for a brief intensify-and-spin. */
.battle__speedlines {
position: absolute;
inset: -14%;
z-index: 3;
pointer-events: none;
opacity: 0;
transform: scale(1.04);
background:
repeating-conic-gradient(from 0deg,
rgba(255, 255, 255, 0.00) 0deg,
rgba(255, 255, 255, 0.78) 0.55deg,
rgba(255, 255, 255, 0.00) 1.6deg,
rgba(255, 255, 255, 0.00) 5.0deg);
-webkit-mask-image: radial-gradient(circle at 50% 50%,
transparent 0%,
transparent 32%,
rgba(0,0,0,0.55) 52%,
#000 78%,
#000 100%);
mask-image: radial-gradient(circle at 50% 50%,
transparent 0%,
transparent 32%,
rgba(0,0,0,0.55) 52%,
#000 78%,
#000 100%);
mix-blend-mode: screen;
animation: speedlinesSpin 9s linear infinite;
transition: opacity 220ms ease, transform 220ms ease;
}
/* Once the round starts, the lines are always faintly present */
.battle__stage.is-playing .battle__speedlines {
opacity: 0.38;
}
/* On every player tap we re-trigger a quick punch */
.battle__speedlines.is-burst {
animation: speedlinesSpin 9s linear infinite, speedlinesBurst 360ms cubic-bezier(.2,.7,.2,1);
}
/* Final-rush intensifies the lines and gives them a red anime feel */
.battle__stage.is-final-rush .battle__speedlines {
opacity: 0.55;
background:
repeating-conic-gradient(from 0deg,
rgba(255, 220, 230, 0.00) 0deg,
rgba(255, 100, 145, 0.85) 0.5deg,
rgba(255, 255, 255, 0.65) 0.95deg,
rgba(255, 220, 230, 0.00) 1.8deg,
rgba(255, 220, 230, 0.00) 4.6deg);
animation: speedlinesSpin 4.4s linear infinite;
}
@keyframes speedlinesSpin {
0% { transform: scale(1.04) rotate(0deg); }
100% { transform: scale(1.04) rotate(360deg); }
}
@keyframes speedlinesBurst {
0% { opacity: 0.38; transform: scale(1.04) rotate(var(--burst-rot, 0deg)); }
35% { opacity: 0.82; transform: scale(1.10) rotate(calc(var(--burst-rot, 0deg) + 18deg)); }
100% { opacity: 0.38; transform: scale(1.04) rotate(calc(var(--burst-rot, 0deg) + 38deg)); }
}
/* ============================================
COUNTDOWN: SIX! / SEVEN! / GO!
============================================ */
.battle__countdown {
font-family: var(--font-loud);
font-size: 120px;
letter-spacing: -2px;
background: rgba(255, 255, 255, 0.18);
}
.battle__countdown--wide {
font-size: 86px;
letter-spacing: -1px;
}
.battle__countdown[data-tone="six"] {
color: var(--six);
text-shadow:
-3px -3px 0 #fff, 3px -3px 0 #fff,
-3px 3px 0 #fff, 3px 3px 0 #fff,
0 0 28px rgba(44, 125, 245, 0.55),
0 12px 36px rgba(20, 82, 184, 0.45);
}
.battle__countdown[data-tone="seven"] {
color: var(--seven);
text-shadow:
-3px -3px 0 #fff, 3px -3px 0 #fff,
-3px 3px 0 #fff, 3px 3px 0 #fff,
0 0 28px rgba(255, 42, 109, 0.55),
0 12px 36px rgba(196, 24, 90, 0.45);
}
.battle__countdown[data-tone="go"] {
color: #ffb800;
text-shadow:
-3px -3px 0 #1b1338, 3px -3px 0 #1b1338,
-3px 3px 0 #1b1338, 3px 3px 0 #1b1338,
0 0 30px rgba(255, 184, 0, 0.60),
0 14px 38px rgba(180, 120, 0, 0.55);
animation: cdGoPunch 520ms cubic-bezier(.2,.7,.2,1);
}
@keyframes cdGoPunch {
0% { transform: scale(0.4) rotate(-8deg); opacity: 0; }
35% { transform: scale(1.30) rotate(2deg); opacity: 1; }
62% { transform: scale(0.92) rotate(-1deg); }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* ----- Battle top: match player's digit-style nicely ----- */
.battle__player-side {
height: 34px;
filter: drop-shadow(0 4px 8px rgba(17, 17, 40, 0.18));
}
.battle__player {
border-radius: 18px;
transition: box-shadow 200ms ease;
}
.battle__player[data-side="6"] {
box-shadow:
var(--shadow-lift),
0 0 0 1px rgba(44, 125, 245, 0.18);
}
.battle__player[data-side="7"] {
box-shadow:
var(--shadow-lift),
0 0 0 1px rgba(255, 42, 109, 0.18);
}
/* Slightly stronger digit shadow against the new lighter PNG glow */
.digit-img,
.battle__digit,
.matching__side,
.result__side {
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}
/* ----- Tap zone hint pulse during the round ----- */
.tap-zone.is-live .tap-zone__hint {
animation: tapHintPulse 1.1s ease-in-out infinite;
}
@keyframes tapHintPulse {
0%, 100% { opacity: 0.85; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-2px); }
}
/* ============================================
0.1.6 — LANGUAGE PICKER + REVAMPED LEADERBOARD
============================================ */
/* ----- Language picker in profile ----- */
.profile-lang {
width: 100%;
margin-top: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.profile-lang__pick {
display: flex;
gap: 10px;
width: 100%;
}
.lang-pill {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 14px;
border: 2px solid rgba(120, 130, 200, 0.22);
border-radius: 16px;
background: #fff;
font-family: var(--font-loud, inherit);
font-size: 14px;
color: #272447;
cursor: pointer;
transition: transform 140ms cubic-bezier(.2,.7,.2,1),
box-shadow 180ms ease,
border-color 180ms ease,
background 180ms ease;
box-shadow:
0 4px 0 rgba(0, 0, 0, 0.06),
0 8px 14px rgba(28, 22, 70, 0.06);
}
.lang-pill:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.06); }
.lang-pill.is-active {
border-color: var(--six);
background: linear-gradient(135deg, rgba(44, 125, 245, 0.14), rgba(255, 42, 109, 0.10));
color: #1d1949;
box-shadow:
0 6px 0 rgba(20, 82, 184, 0.20),
0 14px 24px rgba(44, 125, 245, 0.18);
transform: translateY(-1px);
}
.lang-pill__flag { font-size: 20px; }
.lang-pill__label { letter-spacing: 1px; }
/* ============================================
LEADERBOARD
============================================ */
.screen--top .page-head {
flex-wrap: wrap;
gap: 6px;
}
.screen--top .muted { white-space: nowrap; }
/* Prize pool hero card */
.top-prize {
background: linear-gradient(140deg, #fff5e5, #fff 60%, #ffe6f0);
border: 2px solid rgba(255, 184, 0, 0.28);
border-radius: 22px;
padding: 16px 14px 14px;
box-shadow:
0 18px 28px rgba(255, 184, 0, 0.14),
0 0 0 4px rgba(255, 184, 0, 0.06);
margin-bottom: 14px;
position: relative;
overflow: hidden;
}
.top-prize::before {
content: '';
position: absolute;
inset: -40% -10% auto -10%;
height: 220%;
background: radial-gradient(ellipse at center,
rgba(255, 220, 120, 0.45) 0%,
rgba(255, 220, 120, 0) 60%);
pointer-events: none;
}
.top-prize__title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-family: var(--font-loud, inherit);
font-size: 13px;
letter-spacing: 2px;
color: #6a4f0d;
position: relative;
}
.top-prize__badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #ffd24d, #ffae00);
color: #3a2900;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 1px;
box-shadow: 0 4px 8px rgba(255, 174, 0, 0.32);
}
.stars-icon {
font-size: 13px;
text-shadow: 0 0 4px rgba(255, 174, 0, 0.45);
}
.top-prize__items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
position: relative;
margin-bottom: 12px;
}
.prize {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 4px;
border-radius: 16px;
background: #fff;
font-family: var(--font-loud, inherit);
text-align: center;
box-shadow:
0 6px 0 rgba(28, 22, 70, 0.05),
0 12px 18px rgba(28, 22, 70, 0.06);
}
.prize__rank {
font-size: 13px;
letter-spacing: 1px;
color: #6a4f0d;
}
.prize__val {
font-size: 14px;
color: #1d1949;
white-space: nowrap;
}
.prize__note {
font-size: 9px;
letter-spacing: 1px;
color: #6a4f0d;
opacity: 0.85;
}
.prize--gold {
background: linear-gradient(135deg, #ffe79a, #ffb800);
color: #3a2900;
box-shadow:
0 6px 0 rgba(160, 110, 0, 0.32),
0 14px 22px rgba(255, 174, 0, 0.30);
transform: translateY(-2px);
}
.prize--gold .prize__rank,
.prize--gold .prize__val,
.prize--gold .prize__note { color: #3a2900; }
.prize--silver {
background: linear-gradient(135deg, #f0f0f5, #cfd2dd);
color: #2b2a3d;
box-shadow:
0 5px 0 rgba(120, 124, 145, 0.34),
0 12px 18px rgba(120, 124, 145, 0.22);
}
.prize--silver .prize__rank,
.prize--silver .prize__val { color: #2b2a3d; }
.prize--bronze {
background: linear-gradient(135deg, #f3c5a0, #c87a3d);
color: #3d1f08;
box-shadow:
0 5px 0 rgba(150, 80, 30, 0.34),
0 12px 18px rgba(200, 122, 61, 0.26);
}
.prize--bronze .prize__rank,
.prize--bronze .prize__val { color: #3d1f08; }
/* Special 67th-place callout */
.top-prize__special {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
background: linear-gradient(135deg, #ffe1ec, #ffd6b8);
border: 2px dashed rgba(255, 42, 109, 0.42);
color: #5a1130;
font-family: var(--font-loud, inherit);
font-size: 12px;
letter-spacing: 1px;
margin-bottom: 8px;
}
.top-prize__special-rank {
font-size: 18px;
font-weight: 800;
color: var(--seven);
text-shadow: 0 1px 0 #fff;
}
.top-prize__special-text {
flex: 1;
min-width: 0;
}
.top-prize__special-val {
white-space: nowrap;
font-size: 13px;
background: #fff;
padding: 4px 8px;
border-radius: 999px;
color: #5a1130;
box-shadow: 0 3px 8px rgba(255, 42, 109, 0.18);
}
.top-prize__hint {
position: relative;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.2px;
color: #5a4c2e;
opacity: 0.86;
text-align: center;
}
/* Player list rows */
.top-list {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 12px;
}
.top-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border-radius: 14px;
box-shadow:
0 3px 0 rgba(28, 22, 70, 0.05),
0 8px 14px rgba(28, 22, 70, 0.05);
}
.top-row__rank {
font-family: var(--font-loud, inherit);
font-size: 16px;
width: 32px;
text-align: center;
color: #6f6b8a;
}
.top-row__rank.gold { color: #b87f00; text-shadow: 0 1px 0 rgba(255,220,120,0.5); }
.top-row__rank.silver { color: #6d7080; }
.top-row__rank.bronze { color: #a85a26; }
.top-row__rank.lucky { color: var(--seven); }
.top-row__name {
flex: 1;
min-width: 0;
font-family: var(--font-loud, inherit);
font-size: 14px;
color: #272447;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-row__right {
display: inline-flex;
align-items: center;
gap: 8px;
}
.top-row__side {
font-family: var(--font-loud, inherit);
font-weight: 800;
font-size: 14px;
width: 22px;
height: 22px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
}
.top-row__side[data-side="6"] { background: var(--six); }
.top-row__side[data-side="7"] { background: var(--seven); }
.top-row__score {
font-family: var(--font-loud, inherit);
font-size: 14px;
color: #1d1949;
min-width: 56px;
text-align: right;
}
.top-row__prize {
font-size: 11px;
letter-spacing: 0.5px;
padding: 4px 8px;
border-radius: 999px;
white-space: nowrap;
background: linear-gradient(135deg, #ffe79a, #ffb800);
color: #3a2900;
box-shadow: 0 3px 6px rgba(255, 174, 0, 0.25);
}
.top-row--gold {
background: linear-gradient(135deg, #fff5d6, #ffe79a);
box-shadow:
0 5px 0 rgba(160, 110, 0, 0.18),
0 14px 22px rgba(255, 174, 0, 0.22);
}
.top-row--silver {
background: linear-gradient(135deg, #fafbff, #e6e8f0);
box-shadow:
0 4px 0 rgba(120, 124, 145, 0.18),
0 12px 18px rgba(120, 124, 145, 0.16);
}
.top-row--bronze {
background: linear-gradient(135deg, #ffe4cf, #f3c5a0);
box-shadow:
0 4px 0 rgba(150, 80, 30, 0.18),
0 12px 18px rgba(200, 122, 61, 0.18);
}
.top-row--lucky67 {
background: linear-gradient(135deg, #fff, #ffd6e3);
border: 2px solid rgba(255, 42, 109, 0.42);
box-shadow:
0 6px 0 rgba(196, 24, 90, 0.16),
0 14px 22px rgba(255, 42, 109, 0.22);
}
.top-row--lucky67 .top-row__prize {
background: linear-gradient(135deg, #ff6b9a, #ff2a6d);
color: #fff;
box-shadow: 0 4px 8px rgba(255, 42, 109, 0.32);
}
.top-row.is-me {
outline: 2px solid var(--six);
outline-offset: -2px;
}
.top-row.is-me.top-row--lucky67 {
outline-color: var(--seven);
}
.top-row.is-me .top-row__name { color: var(--six); }
.top-row--lucky67.is-me .top-row__name { color: var(--seven); }
/* Bump the active-nav highlight since classes changed */
.nav-item.is-active .nav-icon { transform: translateY(-2px) scale(1.08); }
.nav-item.is-active .nav-label { color: var(--six); }
/* =====================================================
v0.1.6 — RUSSIAN LOCALE LAYOUT OVERRIDES
Russian words are typically longer + use Cyrillic, so we
override pseudo-element copy and trim a few font sizes to
keep the UI from breaking on narrow phones.
===================================================== */
/* Pseudo-element copy that lives only in CSS — keep in sync with locale */
html[lang="ru"] .side-btn.is-selected::after { content: "ТЫ"; }
html[lang="ru"] .screen--home .side-btn.is-selected::after { content: "ТЫ"; }
html[lang="ru"] .side-choice__hint::before { content: "ТЫ — "; }
html[lang="ru"] .home-battle-cta::after { content: '👇 ЖМИ СЮДА 👇'; }
/* Decorative repeating digits in the share card — keep them readable, not text */
/* (no override needed: "6 7 6 7" reads the same in any language) */
/* ----- HOME CTA: a slightly tighter scale for longer Cyrillic ----- */
html[lang="ru"] .home-battle-cta__main {
font-size: clamp(24px, 7.2vw, 34px);
letter-spacing: 0.5px;
}
html[lang="ru"] .home-battle-cta__main b {
font-size: 1.18em;
}
html[lang="ru"] .home-battle-cta__sub {
font-size: 9.5px;
letter-spacing: 1.1px;
}
/* ----- HERO TAG ("ВЫБЕРИ СТОРОНУ. ТАПАЙ И ПОБЕЖДАЙ.") — slightly tighter ----- */
html[lang="ru"] .hero__tag {
font-size: 12px;
letter-spacing: 1.4px;
}
html[lang="ru"] .screen--home .hero__tag {
font-size: 11px;
letter-spacing: 1.2px;
}
/* ----- DAILY CURSE — Russian phrases are often longer ----- */
html[lang="ru"] .daily-curse__label {
letter-spacing: 0.6px;
}
html[lang="ru"] .daily-curse b {
font-size: 10.5px;
letter-spacing: 0.4px;
line-height: 1.15;
}
/* ----- CHALLENGE CARD ----- */
html[lang="ru"] .challenge-card__title {
font-size: 16px;
letter-spacing: 0.4px;
line-height: 1.15;
}
html[lang="ru"] .challenge-card__meta {
font-size: 11px;
letter-spacing: 0.2px;
}
html[lang="ru"] .challenge-card__cta {
font-size: 12px;
letter-spacing: 1px;
}
/* ----- SHOP CTA buttons + Tabs — "ВЫБРАНО" / "ВЫБРАТЬ" / "РУКИ" / "ЦИФРЫ" ----- */
html[lang="ru"] .shop-card__cta {
font-size: 11px;
letter-spacing: 0.6px;
}
html[lang="ru"] .shop-tab {
letter-spacing: 1px;
}
/* ----- PROFILE STAT LABELS — "ПОБЕДЫ" / "ПОРАЖЕНИЯ" / "РЕКОРД" longer than EN ----- */
html[lang="ru"] .stat span {
font-size: 9px;
letter-spacing: 0.6px;
}
/* ----- SOCIAL ACTION BUTTONS — keep them on one line ----- */
html[lang="ru"] .social-btn:not(.social-btn--shame) {
font-size: 10px;
letter-spacing: 0.5px;
}
html[lang="ru"] .social-btn--shame {
font-size: 13.5px;
letter-spacing: 0.8px;
}
/* ----- RESULT VERDICT — "ПОРАЖЕНИЕ" longer than "DEFEAT" ----- */
html[lang="ru"] .result__verdict {
letter-spacing: 1.5px;
}
/* ----- WAR CARD — "РАВНЫЙ БРЕЙНРОТ" / "ПРИГЛАСИ ЧАТ" etc. ----- */
html[lang="ru"] .chat-war-card__verdict,
html[lang="ru"] .chat-war-card__label {
font-size: 9.5px;
letter-spacing: 0.6px;
}
/* ----- TOPBAR SHOP — "МАГАЗИН" longer than "SHOP" ----- */
html[lang="ru"] .topbar__shop-text {
font-size: 10px;
letter-spacing: 0.5px;
}
/* ----- COMBO KICKER — Cyrillic kickers ("КОМБО" / "ОГОНЬ" / "В УДАРЕ" / "БОГ") ----- */
html[lang="ru"] .battle__combo-kicker {
letter-spacing: 0.6px;
}
/* ----- JACKPOT SUB ("+67 АУРЫ • БРЕЙНРОТ ДЖЕКПОТ" wraps) ----- */
html[lang="ru"] .sixty-seven-jackpot__sub {
letter-spacing: 0.6px;
}
/* =====================================================
v0.1.8 — Minimal result actions
Keep only shame, raid, and home on the battle result screen.
===================================================== */
.social-actions--minimal {
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 4px;
}
.social-actions--minimal .social-btn--shame {
grid-column: 1 / -1;
}
.ghost-btn--result-home {
min-height: 48px;
padding: 9px 10px;
border-radius: 16px;
font-size: 11px;
letter-spacing: 1px;
color: var(--ink-soft);
background: rgba(255,255,255,0.94);
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 8px 0 rgba(17,17,40,0.10), 0 14px 24px rgba(17,17,40,0.08);
}
.ghost-btn--result-home:active {
transform: translateY(5px);
box-shadow: 0 3px 0 rgba(17,17,40,0.10), 0 8px 14px rgba(17,17,40,0.08);
}
@media (max-height: 760px) {
.social-actions--minimal .social-btn,
.social-actions--minimal .ghost-btn--result-home {
min-height: 42px;
font-size: 9px;
}
.social-actions--minimal .social-btn--shame {
min-height: 50px;
font-size: 13px;
}
}
/* =====================================================
v0.1.9 — RELEASE CANDIDATE CLEANUP
Keep the core: 6/7 choice, giant hands, 6.7s battle, Telegram shame/raid.
Remove visual dead weight and make the path obvious.
===================================================== */
/* App shell polish */
#app {
background:
radial-gradient(80% 44% at 20% 0%, rgba(44,125,245,0.16), transparent 60%),
radial-gradient(70% 38% at 84% 4%, rgba(255,42,109,0.16), transparent 62%),
linear-gradient(180deg, #faf9ff 0%, #efedff 100%);
}
.screen {
padding-left: 16px;
padding-right: 16px;
}
/* Kill non-release noise on HOME. These ideas can live in share text / backend later. */
.screen--home .war-card,
.screen--home .daily-curse {
display: none !important;
}
/* Chat war is only useful when Telegram gives a real chat context. JS toggles [hidden]. */
.chat-war-card[hidden],
.challenge-card[hidden] {
display: none !important;
}
/* Cleaner topbar: profile + obvious shop, no fake complexity. */
.screen--home .topbar {
padding: 4px 2px 10px;
gap: 10px;
}
.screen--home .topbar__user,
.screen--home .topbar__shop-btn {
background: rgba(255,255,255,0.92);
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 10px 22px rgba(28,20,76,0.10);
}
.screen--home .topbar__user {
min-height: 58px;
padding: 6px 10px 6px 6px;
border-radius: 20px;
}
.screen--home .topbar__user .avatar {
width: 46px;
height: 46px;
border-radius: 16px;
font-size: 25px;
}
.screen--home .topbar__name {
font-size: 15px;
}
.screen--home .topbar__rank {
font-size: 9px;
}
.screen--home .topbar__shop-btn {
min-height: 58px;
border-radius: 20px;
padding: 8px 10px;
flex-direction: column;
gap: 2px;
}
.screen--home .topbar__shop-text {
font-size: 12px;
letter-spacing: 1px;
}
.screen--home .topbar__coin-wrap {
font-size: 10px;
}
/* HOME: poster first, controls second. */
.screen--home .hero {
margin-top: 0;
margin-bottom: 12px;
min-height: 318px;
}
.screen--home .hero__digits {
padding-top: 0;
gap: 8px;
}
.screen--home .digit-img {
height: 154px;
max-width: 46vw;
}
.screen--home .hero__or {
font-size: 17px;
transform: translateY(4px);
}
.screen--home .hero__hands {
height: 178px;
margin-top: -18px;
}
.screen--home .hero__hand {
width: 232px;
}
.screen--home .hero__hand--left {
transform: translateX(-101%) rotate(-6deg) scaleX(-1);
}
.screen--home .hero__hand--right {
transform: translateX(101%) rotate(6deg);
}
.screen--home .hero__tag {
margin-top: 10px;
font-size: 12px;
letter-spacing: 1.6px;
opacity: 0.74;
}
/* Side choice is still explicit, but no longer a separate heavy card. */
.screen--home .side-picker {
gap: 10px;
margin-bottom: 10px;
}
.screen--home .side-btn {
min-height: 58px;
padding: 14px 12px;
border-radius: 20px;
font-size: 18px;
}
.screen--home .side-btn.is-selected::after {
top: -8px;
right: 8px;
font-size: 7px;
}
.screen--home .side-choice {
margin: 0 0 10px;
padding: 8px 10px;
border-radius: 18px;
box-shadow: none;
background: rgba(255,255,255,0.58);
}
.screen--home .side-choice__hint {
display: none;
}
.screen--home .side-choice__value {
width: 40px;
height: 40px;
border-radius: 14px;
font-size: 25px;
}
/* One huge obvious action. */
.home-battle-cta {
margin-top: 4px;
margin-bottom: 12px;
min-height: 92px;
border-radius: 28px;
box-shadow: 0 14px 0 rgba(17,17,40,0.20), 0 22px 42px rgba(255,42,109,0.22);
}
.home-battle-cta__main {
font-size: 25px;
}
.home-battle-cta__sub {
opacity: 0.86;
}
/* Result screen: no social card, just outcome + scores + three actions. */
.result {
justify-content: flex-start;
padding-top: 22px;
gap: 10px;
}
.result-share-card {
display: none !important;
}
.result__verdict {
margin-top: 0;
font-size: clamp(38px, 10vw, 54px);
line-height: 0.95;
text-align: center;
}
.result__subtitle {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
min-height: 32px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(17,17,40,0.88);
color: #fff;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1.4px;
text-align: center;
box-shadow: 0 10px 20px rgba(17,17,40,0.12);
}
.result[data-side="6"] .result__subtitle {
background: linear-gradient(135deg, var(--six), #4c42ff);
}
.result[data-side="7"] .result__subtitle {
background: linear-gradient(135deg, var(--seven), #ff7a00);
}
.result__side {
height: clamp(108px, 24vh, 168px);
margin: 2px auto 0;
filter: drop-shadow(0 14px 24px rgba(17,17,40,0.14));
}
.result__rows {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
margin: 4px 0 8px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.result__row {
min-height: 74px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
padding: 10px 8px;
border: 1px solid rgba(17,17,40,0.08);
border-radius: 20px;
background: rgba(255,255,255,0.88);
box-shadow: 0 10px 22px rgba(28,20,76,0.08);
text-align: center;
}
.result__row span {
font-size: 9px;
line-height: 1.1;
letter-spacing: 1px;
}
.result__row b {
font-size: 24px;
line-height: 1;
}
.result__row--reward b {
font-size: 18px;
}
/* Challenge status is useful only when a link was actually opened. */
.challenge-status[hidden] {
display: none !important;
}
.challenge-status {
margin: 0 0 4px;
border-radius: 18px;
padding: 10px 12px;
}
/* Three release actions. No rematch/copy/story. */
.social-actions--minimal {
display: flex !important;
flex-direction: column;
gap: 11px;
width: 100%;
margin-top: 2px;
}
.social-actions--minimal .social-btn,
.social-actions--minimal .ghost-btn--result-home {
width: 100%;
min-height: 58px;
border-radius: 22px;
font-size: 14px;
letter-spacing: 1.8px;
}
.social-actions--minimal .social-btn--shame {
order: 1;
min-height: 68px;
font-size: 17px;
background: linear-gradient(135deg, #ffb800 0%, #ff2a6d 58%, #7a42ff 100%);
box-shadow: 0 10px 0 rgba(131,45,91,0.36), 0 18px 32px rgba(255,42,109,0.22);
}
.social-actions--minimal #result-raid {
order: 2;
background: linear-gradient(180deg, #2c2c48, #111128);
}
.social-actions--minimal #result-home {
order: 3;
background: rgba(255,255,255,0.94);
color: var(--ink-soft);
}
.social-actions--minimal .social-btn:active,
.social-actions--minimal .ghost-btn--result-home:active {
transform: translateY(5px);
}
/* Shop/profile secondary screens cleaner. */
.page-head {
background: rgba(255,255,255,0.64);
border: 1px solid rgba(17,17,40,0.08);
border-radius: 22px;
padding: 12px;
box-shadow: 0 10px 22px rgba(28,20,76,0.08);
}
.shop-card,
.profile-card,
.top-row,
.top-prize {
border-color: rgba(17,17,40,0.08);
box-shadow: 0 10px 22px rgba(28,20,76,0.08);
}
/* Bottom nav: exactly three decisions. */
.navbar {
padding-left: 18px;
padding-right: 18px;
}
.nav-label {
font-size: 10px;
}
.nav-item--battle {
min-height: 80px;
border-radius: 30px;
}
/* Compact phones */
@media (max-height: 760px) {
.result {
padding-top: 12px;
gap: 8px;
}
.result__side {
height: 108px;
}
.result__row {
min-height: 62px;
padding: 8px 6px;
}
.result__row b {
font-size: 20px;
}
.social-actions--minimal .social-btn,
.social-actions--minimal .ghost-btn--result-home {
min-height: 48px;
font-size: 12px;
}
.social-actions--minimal .social-btn--shame {
min-height: 56px;
font-size: 14px;
}
}
@media (max-height: 700px) {
.screen--home .hero {
min-height: 282px;
}
.screen--home .digit-img {
height: 132px;
}
.screen--home .hero__hands {
height: 150px;
margin-top: -14px;
}
.screen--home .hero__hand {
width: 204px;
}
.home-battle-cta {
min-height: 78px;
}
}
/* =====================================================
v0.1.10 — Result polish, no duplicate side chip, obvious home return,
and selected-side hero hand ownership.
===================================================== */
.screen--home .side-choice {
display: none !important;
}
.hero__hand[data-owner="me"] {
filter: drop-shadow(0 16px 30px rgba(255,184,0,0.18)) drop-shadow(0 10px 22px rgba(0,0,0,0.20));
}
.hero__hand[data-owner="other"] {
opacity: 0.96;
filter: saturate(0.96) drop-shadow(0 10px 22px rgba(0,0,0,0.18));
}
.page-head--with-home {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
}
.page-head--with-home h2 {
text-align: center;
}
.page-head__home {
min-height: 38px;
padding: 8px 12px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--six), #6c42ff);
box-shadow: 0 6px 0 rgba(42,44,68,0.22), 0 10px 18px rgba(44,125,245,0.16);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1px;
white-space: nowrap;
}
.page-head__home:active {
transform: translateY(4px);
box-shadow: 0 2px 0 rgba(42,44,68,0.22), 0 6px 12px rgba(44,125,245,0.12);
}
.screen--profile .page-head--with-home,
.screen--top .page-head--with-home {
grid-template-columns: auto 1fr auto;
}
.screen--profile .page-head--with-home::after,
.screen--top .page-head--with-home::after {
content: '';
width: 74px;
}
.screen--result {
background:
radial-gradient(90% 44% at 50% 6%, rgba(255,255,255,0.90), transparent 66%),
radial-gradient(70% 38% at 84% 16%, rgba(255,42,109,0.12), transparent 70%),
radial-gradient(70% 38% at 18% 18%, rgba(44,125,245,0.12), transparent 70%);
}
.result {
min-height: 100%;
justify-content: flex-start;
padding: 18px 8px 18px;
gap: 10px;
}
.result__subtitle {
margin-bottom: 2px;
}
.result__side {
height: clamp(120px, 25vh, 180px);
}
.result__rows {
margin-bottom: 2px;
}
.result-callout {
width: 100%;
border-radius: 26px;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78));
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 12px 28px rgba(28,20,76,0.10);
text-align: center;
}
.result[data-outcome="win"] .result-callout,
.result[data-outcome="jackpot"] .result-callout {
box-shadow: 0 14px 32px rgba(255,184,0,0.16), 0 12px 28px rgba(28,20,76,0.08);
}
.result[data-outcome="lose"] .result-callout {
box-shadow: 0 14px 32px rgba(255,42,109,0.13), 0 12px 28px rgba(28,20,76,0.08);
}
.result-callout__title {
font-family: var(--font-loud);
font-size: clamp(16px, 4.8vw, 23px);
line-height: 1.02;
letter-spacing: 1px;
color: var(--ink);
}
.result-callout__text {
margin-top: 8px;
color: var(--ink-soft);
font-weight: 800;
font-size: 12px;
line-height: 1.25;
letter-spacing: 0.2px;
}
.result-streak {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
margin-top: 10px;
padding: 7px 12px;
border-radius: 999px;
color: #fff;
background: rgba(17,17,40,0.88);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 1.2px;
box-shadow: 0 8px 16px rgba(17,17,40,0.13);
}
.result-streak[data-type="win"] {
background: linear-gradient(135deg, var(--six), #6c42ff);
}
.result-streak[data-type="lose"] {
background: linear-gradient(135deg, var(--seven), #ff7a00);
}
.social-actions--minimal {
margin-top: auto !important;
padding-top: 18px;
}
@media (min-height: 760px) {
.social-actions--minimal {
padding-top: 34px;
}
}
@media (max-height: 760px) {
.result-callout {
padding: 12px 14px;
}
.result-callout__title {
font-size: 15px;
}
.result-callout__text {
font-size: 11px;
margin-top: 6px;
}
.result-streak {
min-height: 26px;
margin-top: 7px;
font-size: 9px;
}
}
@media (max-width: 380px) {
.page-head--with-home {
gap: 7px;
}
.page-head__home {
padding: 7px 10px;
font-size: 9px;
}
}
/* =====================================================
v0.1.11 — Result home anti-misclick lock
The home button is disabled for 3 seconds after battle results appear.
===================================================== */
.ghost-btn--result-home.is-counting-down,
.ghost-btn--result-home:disabled {
cursor: not-allowed;
opacity: 0.66;
color: rgba(95,90,134,0.88);
background: rgba(255,255,255,0.72);
box-shadow: 0 5px 0 rgba(17,17,40,0.08), 0 10px 18px rgba(17,17,40,0.06);
transform: none !important;
}
.ghost-btn--result-home.is-counting-down::after {
content: '';
display: inline-block;
width: 7px;
height: 7px;
margin-left: 8px;
border-radius: 50%;
background: currentColor;
animation: resultHomeLockPulse 700ms ease-in-out infinite;
}
@keyframes resultHomeLockPulse {
0%, 100% { transform: scale(0.82); opacity: 0.45; }
50% { transform: scale(1.18); opacity: 1; }
}
/* =====================================================
v0.1.12 — UI polish + referral ladder
===================================================== */
/* Put the call-to-action hint under the fight button, not inside it. */
.home-battle-cta::after { display: none !important; }
.home-battle-cta { margin-bottom: 6px; }
.home-battle-hint {
width: max-content;
max-width: calc(100% - 30px);
margin: 0 auto 12px;
padding: 8px 16px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, rgba(17,17,40,0.92), rgba(63,33,124,0.90));
box-shadow: 0 8px 0 rgba(17,17,40,0.16), 0 14px 24px rgba(63,33,124,0.16);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 1.5px;
text-align: center;
transform: rotate(-1deg);
}
/* Strong but compact referral system card. */
.ref-card {
position: relative;
margin: 10px 0 12px;
padding: 14px;
border-radius: 26px;
overflow: hidden;
background:
radial-gradient(80% 80% at 8% 0%, rgba(44,125,245,0.20), transparent 62%),
radial-gradient(70% 80% at 100% 20%, rgba(255,42,109,0.22), transparent 64%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 12px 28px rgba(28,20,76,0.10);
}
.ref-card::before {
content: '';
position: absolute;
inset: -40% -20%;
background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.34) 48%, transparent 66%);
transform: translateX(-38%);
animation: refShine 4.4s linear infinite;
pointer-events: none;
}
@keyframes refShine { 100% { transform: translateX(38%); } }
.ref-card > * { position: relative; z-index: 1; }
.ref-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ref-card__eyebrow {
color: var(--muted);
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 1.4px;
}
.ref-card__title {
margin-top: 2px;
color: var(--ink);
font-family: var(--font-loud);
font-size: clamp(16px, 4.8vw, 22px);
line-height: 1;
letter-spacing: 1px;
}
.ref-card__count {
min-width: 78px;
padding: 8px 10px;
border-radius: 18px;
color: #fff;
background: linear-gradient(135deg, var(--six), var(--seven));
text-align: center;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.16), 0 10px 18px rgba(63,33,124,0.16);
}
.ref-card__count b {
display: block;
font-family: var(--font-loud);
font-size: 23px;
line-height: 1;
}
.ref-card__count span {
display: block;
margin-top: 3px;
font-family: var(--font-display);
font-size: 8px;
letter-spacing: 1px;
}
.ref-card__progress {
height: 10px;
margin-top: 12px;
border-radius: 999px;
overflow: hidden;
background: rgba(17,17,40,0.08);
}
.ref-card__progress span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--six), var(--gold), var(--seven));
transition: width 360ms cubic-bezier(.2,.7,.2,1);
}
.ref-card__meta {
margin-top: 7px;
color: var(--ink-soft);
font-weight: 800;
font-size: 11px;
line-height: 1.2;
}
.ref-card__tiers {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-top: 10px;
}
.ref-tier {
min-height: 28px;
display: grid;
place-items: center;
border-radius: 999px;
color: var(--ink-soft);
background: rgba(17,17,40,0.06);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: .4px;
}
.ref-tier.is-done {
color: #fff;
background: linear-gradient(135deg, var(--six), #6c42ff);
}
.ref-tier.is-next {
color: #fff;
background: linear-gradient(135deg, var(--gold), var(--seven));
box-shadow: 0 8px 14px rgba(255,42,109,0.18);
}
.ref-card__cta {
width: 100%;
min-height: 52px;
margin-top: 12px;
border-radius: 18px;
color: #fff;
background: linear-gradient(135deg, #ff8a1d, #ff2a6d, #6c42ff);
box-shadow: 0 8px 0 rgba(93,45,100,0.28), 0 14px 24px rgba(255,42,109,0.20);
font-family: var(--font-loud);
font-size: 15px;
letter-spacing: 1px;
}
.ref-card__cta:active {
transform: translateY(5px);
box-shadow: 0 3px 0 rgba(93,45,100,0.28), 0 8px 16px rgba(255,42,109,0.14);
}
.ref-card__foot {
margin-top: 9px;
color: var(--muted);
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 1px;
text-align: center;
}
/* Clean, aligned page headers for Shop / Top / Profile. */
.page-head.page-head--with-home {
display: grid;
grid-template-columns: minmax(82px, auto) minmax(0, 1fr) minmax(82px, auto);
align-items: center;
gap: 8px;
min-height: 64px;
padding: 10px;
border-radius: 24px;
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78));
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 12px 24px rgba(28,20,76,0.08);
}
.page-head.page-head--with-home h2 {
margin: 0;
min-width: 0;
text-align: center;
font-size: clamp(22px, 6vw, 31px);
line-height: .95;
letter-spacing: 1.5px;
white-space: nowrap;
}
.page-head__home,
.page-head__coins,
.page-head.page-head--with-home .muted.small {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
white-space: nowrap;
}
.page-head__home {
padding: 8px 12px;
font-size: 9px;
}
.page-head__coins {
justify-self: end;
gap: 6px;
padding: 8px 12px;
font-size: 13px;
}
.page-head.page-head--with-home .muted.small {
justify-self: end;
max-width: 92px;
padding: 7px 10px;
background: rgba(17,17,40,0.06);
color: var(--ink-soft);
font-family: var(--font-display);
font-size: 8px;
line-height: 1.15;
letter-spacing: .7px;
text-align: center;
}
.screen--profile .page-head--with-home::after,
.screen--top .page-head--with-home::after {
width: 82px;
}
/* Countdown: remove ugly white rectangle, keep the punchy text. */
.battle__countdown {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: inherit;
overflow: hidden;
isolation: isolate;
}
.battle__countdown::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background:
radial-gradient(52% 38% at 50% 52%, rgba(255,255,255,0.34), transparent 70%),
radial-gradient(72% 48% at 18% 18%, rgba(44,125,245,0.12), transparent 72%),
radial-gradient(72% 48% at 82% 18%, rgba(255,42,109,0.12), transparent 72%);
}
/* Top-100 only: if the player is lower, show them in a separate shame card. */
.top-me-rank {
margin: 12px 0 18px;
padding: 12px;
border-radius: 24px;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.80));
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 14px 28px rgba(28,20,76,0.10);
}
.top-me-rank__title {
margin-bottom: 8px;
color: var(--seven);
font-family: var(--font-loud);
font-size: 18px;
letter-spacing: 1px;
text-align: center;
}
.top-me-rank__text {
margin-top: 8px;
color: var(--ink-soft);
font-size: 11px;
font-weight: 800;
text-align: center;
letter-spacing: .2px;
}
.top-row--outside {
border: 2px dashed rgba(255,42,109,0.36);
background: linear-gradient(135deg, #fff, #fff0f5);
}
@media (max-height: 760px) {
.ref-card { padding: 12px; }
.ref-card__tiers { display: none; }
.ref-card__cta { min-height: 46px; font-size: 13px; }
.home-battle-hint { margin-bottom: 8px; }
}
@media (max-width: 380px) {
.page-head.page-head--with-home {
grid-template-columns: minmax(74px, auto) minmax(0, 1fr) minmax(74px, auto);
gap: 6px;
}
.page-head.page-head--with-home h2 { font-size: clamp(20px, 5.5vw, 28px); }
.page-head__coins { padding: 7px 9px; font-size: 12px; }
.page-head.page-head--with-home .muted.small { max-width: 78px; font-size: 7px; }
.screen--profile .page-head--with-home::after,
.screen--top .page-head--with-home::after { width: 74px; }
}
/* =====================================================
v0.1.13 — Guilds / squads
===================================================== */
.guild-card {
position: relative;
margin: 12px 0;
padding: 14px;
border-radius: 26px;
overflow: hidden;
background:
radial-gradient(85% 75% at 5% 0%, rgba(255,184,0,0.18), transparent 60%),
radial-gradient(75% 75% at 100% 20%, rgba(108,66,255,0.22), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 12px 28px rgba(28,20,76,0.10);
}
.guild-card[data-state="joined"] {
background:
radial-gradient(88% 80% at 0% 0%, rgba(44,125,245,0.22), transparent 62%),
radial-gradient(80% 78% at 100% 30%, rgba(255,42,109,0.24), transparent 64%),
linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.84));
}
.guild-card::before {
content: '';
position: absolute;
inset: -40% -20%;
pointer-events: none;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 48%, transparent 66%);
transform: translateX(-42%);
animation: guildShine 5.2s linear infinite;
}
@keyframes guildShine { 100% { transform: translateX(42%); } }
.guild-card > * { position: relative; z-index: 1; }
.guild-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.guild-card__eyebrow {
color: var(--muted);
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 1.4px;
}
.guild-card__title {
margin-top: 2px;
font-family: var(--font-loud);
font-size: clamp(18px, 5vw, 24px);
line-height: 1;
letter-spacing: 1px;
color: var(--ink);
}
.guild-card__badge {
min-width: 56px;
height: 48px;
padding: 0 10px;
display: grid;
place-items: center;
border-radius: 18px;
color: #fff;
background: linear-gradient(135deg, var(--gold), var(--seven), #6c42ff);
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.16), 0 10px 18px rgba(63,33,124,0.16);
font-family: var(--font-loud);
font-size: 18px;
letter-spacing: 1px;
}
.guild-card__meta,
.guild-card__reward,
.guild-card__lock {
margin-top: 8px;
color: var(--ink-soft);
font-weight: 800;
font-size: 11px;
line-height: 1.25;
}
.guild-card__lock {
color: #fff;
background: rgba(17,17,40,0.88);
border-radius: 999px;
padding: 7px 10px;
text-align: center;
font-family: var(--font-display);
letter-spacing: .6px;
}
.guild-card__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 12px;
}
.guild-card__stats span {
min-height: 58px;
border-radius: 18px;
display: grid;
place-items: center;
background: rgba(17,17,40,0.06);
border: 1px solid rgba(17,17,40,0.06);
}
.guild-card__stats b {
font-family: var(--font-loud);
font-size: 18px;
line-height: 1;
color: var(--ink);
}
.guild-card__stats small {
margin-top: -6px;
color: var(--muted);
font-family: var(--font-display);
font-size: 8px;
letter-spacing: 1px;
}
.guild-card__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
.guild-card__cta {
min-height: 48px;
border-radius: 18px;
color: #fff;
background: linear-gradient(180deg, #2a2c44, #111128);
box-shadow: 0 7px 0 rgba(17,17,40,0.24), 0 12px 22px rgba(17,17,40,0.12);
font-family: var(--font-loud);
font-size: 12px;
letter-spacing: .8px;
}
.guild-card__cta--primary {
grid-column: 1 / -1;
background: linear-gradient(135deg, #ff8a1d, #ff2a6d, #6c42ff);
box-shadow: 0 8px 0 rgba(93,45,100,0.28), 0 14px 24px rgba(255,42,109,0.20);
}
.guild-card__cta--danger {
background: linear-gradient(180deg, #5b5f7a, #2a2c44);
}
.guild-card__cta:active {
transform: translateY(5px);
box-shadow: 0 3px 0 rgba(17,17,40,0.20), 0 7px 14px rgba(17,17,40,0.10);
}
.top-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 10px 0 12px;
padding: 6px;
border-radius: 22px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 10px 20px rgba(28,20,76,0.06);
}
.top-tab {
min-height: 44px;
border-radius: 17px;
color: var(--ink-soft);
background: rgba(17,17,40,0.05);
font-family: var(--font-loud);
font-size: 12px;
letter-spacing: 1px;
}
.top-tab.is-active {
color: #fff;
background: linear-gradient(135deg, var(--six), var(--seven));
box-shadow: 0 8px 16px rgba(255,42,109,0.18);
}
.guild-prize {
margin-bottom: 12px;
padding: 14px;
border-radius: 24px;
background:
radial-gradient(75% 70% at 10% 0%, rgba(255,184,0,0.20), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 12px 26px rgba(28,20,76,0.08);
}
.guild-prize__title {
color: var(--gold-deep);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 1.5px;
margin-bottom: 10px;
}
.guild-prize__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.guild-prize__grid div {
min-height: 76px;
padding: 10px;
border-radius: 18px;
background: rgba(17,17,40,0.05);
border: 1px solid rgba(17,17,40,0.05);
}
.guild-prize__grid b,
.guild-prize__grid span {
display: block;
font-family: var(--font-loud);
line-height: 1;
}
.guild-prize__grid b { color: var(--ink-soft); font-size: 13px; }
.guild-prize__grid span { margin-top: 5px; color: var(--ink); font-size: 17px; }
.guild-prize__grid small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1.15; }
.guild-prize__rules {
margin-top: 10px;
color: var(--ink-soft);
font-size: 10px;
font-weight: 800;
line-height: 1.25;
}
.top-row--guild {
grid-template-columns: 42px 1fr auto;
}
.guild-row-tag {
display: inline-grid;
place-items: center;
min-width: 36px;
margin-right: 6px;
padding: 4px 6px;
border-radius: 10px;
color: #fff;
background: linear-gradient(135deg, var(--six), var(--seven));
font-family: var(--font-display);
font-size: 9px;
letter-spacing: .5px;
}
.top-row__right {
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
flex-wrap: wrap;
}
.guild-join-mini {
padding: 7px 8px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #ff8a1d, #ff2a6d);
font-family: var(--font-display);
font-size: 8px;
letter-spacing: .7px;
}
.guild-join-mini:disabled {
opacity: .45;
background: var(--ink-soft);
}
@media (max-height: 760px) {
.guild-card { padding: 12px; }
.guild-card__stats span { min-height: 50px; }
.guild-card__cta { min-height: 42px; font-size: 10px; }
.guild-prize__grid div { min-height: 64px; }
}
/* =====================================================
v0.1.15 — fonts reverted, keep header/countdown/result polish
===================================================== */
.page-head h2,
.topbar__name,
.topbar__rank,
.hero__or,
.hero__tag,
.result__verdict,
.result__subtitle,
.home-battle-cta__mini,
.home-battle-cta__main,
.home-battle-cta__sub,
.side-btn__label,
.top-tab,
.shop-tab,
.nav-label,
.social-btn,
.primary-btn,
.ghost-btn,
.ref-card__eyebrow,
.ref-card__title,
.guild-card__title,
.guild-prize__title,
.top-prize__title,
.result-streak,
.battle__meme,
.battle__combo {
letter-spacing: 0.02em !important;
}
.page-head h2 {
font-family: var(--font-display);
font-weight: 700;
}
.home-battle-cta { margin-bottom: 0; }
.home-battle-hint {
margin: 8px auto 16px;
padding: 8px 14px;
border-radius: 999px;
transform: none;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.02em;
}
/* Stronger, cleaner section headers */
.page-head.page-head--with-home {
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr) max-content;
align-items: center;
gap: 10px;
margin-bottom: 16px;
padding: 6px 2px 10px;
}
.page-head.page-head--with-home::after { content: none !important; display: none !important; }
.page-head.page-head--with-home h2 {
margin: 0;
min-width: 0;
text-align: center;
font-size: clamp(17px, 4.9vw, 28px);
line-height: 1.05;
}
.page-head__home {
min-width: 92px;
height: 42px;
padding: 0 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.page-head__coins,
.page-head__timer {
justify-self: end;
min-width: 86px;
min-height: 42px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.95);
border: 1px solid rgba(17,17,40,0.08);
box-shadow: 0 10px 18px rgba(28,20,76,0.10);
}
.page-head__timer {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 1px;
color: var(--ink);
text-align: right;
}
.page-head__timer-label {
font-size: 9px;
line-height: 1;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.01em;
}
.page-head__timer-value {
font-family: var(--font-display);
font-size: 13px;
line-height: 1.05;
color: var(--seven);
letter-spacing: 0.01em;
}
.screen--profile .page-head.page-head--with-home {
grid-template-columns: max-content minmax(0,1fr) max-content;
}
.screen--profile .page-head.page-head--with-home::after {
content: '' !important;
display: block !important;
width: 92px;
height: 42px;
}
.screen--shop .page-head.page-head--with-home,
.screen--top .page-head.page-head--with-home {
grid-template-columns: max-content minmax(0,1fr) max-content;
}
.screen--top .page-head.page-head--with-home h2 {
font-size: clamp(18px, 5vw, 31px);
}
/* Countdown overlay: remove the ugly white box and turn it into a soft full-stage spotlight */
.battle__countdown {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow: hidden;
isolation: isolate;
}
.battle__countdown::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: min(84vw, 340px);
height: min(50vw, 200px);
transform: translate(-50%, -50%);
border-radius: 999px;
background:
radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.78), rgba(255,255,255,0.42) 38%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0) 100%),
radial-gradient(65% 65% at 20% 35%, rgba(44,125,245,0.16), transparent 72%),
radial-gradient(65% 65% at 80% 35%, rgba(255,42,109,0.16), transparent 72%);
filter: blur(8px);
z-index: -1;
}
/* Result subtitle clarity on losses */
.result__subtitle {
font-family: var(--font-display);
font-weight: 700;
}
@media (max-width: 390px) {
.page-head.page-head--with-home { gap: 8px; }
.page-head__home { min-width: 82px; font-size: 11px; padding: 0 12px; }
.page-head__coins,
.page-head__timer { min-width: 76px; padding: 6px 8px; }
.page-head__timer-label { font-size: 8px; }
.page-head__timer-value { font-size: 12px; }
.screen--profile .page-head.page-head--with-home::after { width: 82px; }
}
/* =====================================================
v0.1.16 — tighter headers + centered top timer + clean profile
===================================================== */
.page-head h2,
.page-head.page-head--with-home h2 {
font-size: clamp(17px, 4.5vw, 24px) !important;
line-height: 1.02 !important;
}
.screen--top .page-head.page-head--with-home h2 {
font-size: clamp(17px, 4.6vw, 25px) !important;
}
.screen--shop .page-head.page-head--with-home h2,
.screen--profile .page-head.page-head--with-home h2 {
font-size: clamp(17px, 4.4vw, 24px) !important;
}
.page-head__timer {
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.page-head__timer-label,
.page-head__timer-value {
width: 100%;
text-align: center !important;
}
.profile-side,
.profile-lang {
display: none !important;
}
@media (max-width: 390px) {
.page-head h2,
.page-head.page-head--with-home h2 {
font-size: clamp(16px, 4.25vw, 21px) !important;
}
.screen--top .page-head.page-head--with-home h2 {
font-size: clamp(16px, 4.3vw, 22px) !important;
}
}
/* =====================================================
v0.1.17 — GEN ALPHA REDESIGN
Holographic animated bg + hero digit dance +
amped-up battle visuals. All purely additive; no
existing rules are modified.
===================================================== */
/* ---------- Let the bg shine through the app shell ---------- */
body { background: transparent; }
#app { background: transparent; }
/* Keep the desktop "phone frame" backdrop dark so the bg
reads against it. */
@media (min-width: 540px) {
body {
background:
radial-gradient(60% 40% at 20% 10%, rgba(44,125,245,0.20), transparent 60%),
radial-gradient(60% 40% at 80% 90%, rgba(255,42,109,0.18), transparent 60%),
#0c0d18;
}
}
/* ---------- Animated holographic mesh ---------- */
.bg-layer {
/* base canvas so the radials blend correctly even before mesh loads */
background: linear-gradient(180deg, #f4eeff 0%, #ffeef8 60%, #fff6e9 100%);
}
.bg-mesh {
background:
radial-gradient(72% 50% at 12% 6%, rgba(44,125,245,0.55), transparent 60%),
radial-gradient(70% 50% at 94% 22%, rgba(255,42,109,0.48), transparent 62%),
radial-gradient(70% 55% at 50% 104%, rgba(255,184,0,0.42), transparent 70%),
radial-gradient(60% 40% at 78% 78%, rgba(143,59,255,0.45), transparent 65%),
radial-gradient(60% 40% at 18% 64%, rgba(0,210,255,0.32), transparent 65%);
animation: meshShift 16s ease-in-out infinite alternate;
will-change: transform, filter;
filter: saturate(1.12);
opacity: 0.95;
}
@keyframes meshShift {
0% { transform: scale(1.00) translate(0, 0); filter: hue-rotate(0deg) saturate(1.10); }
33% { transform: scale(1.06) translate(-12px, 6px); filter: hue-rotate(12deg) saturate(1.22); }
66% { transform: scale(1.09) translate( 10px,-10px); filter: hue-rotate(-10deg) saturate(1.18); }
100% { transform: scale(1.03) translate(-4px, 10px); filter: hue-rotate(6deg) saturate(1.12); }
}
/* ---------- Drifting perspective-ish grid ---------- */
.bg-grid {
position: absolute; inset: -2%;
background-image:
linear-gradient(rgba(63,33,124,0.14) 1px, transparent 1px),
linear-gradient(90deg, rgba(63,33,124,0.14) 1px, transparent 1px);
background-size: 38px 38px;
-webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 22%, transparent 80%);
mask-image: radial-gradient(ellipse at 50% 38%, #000 22%, transparent 80%);
pointer-events: none;
animation: gridDrift 28s linear infinite;
opacity: 0.9;
}
@keyframes gridDrift {
0% { background-position: 0 0; }
100% { background-position: 36px 36px; }
}
/* ---------- Big ghost 6/7 silhouettes drifting in the bg ---------- */
.bg-ghosts {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
}
.bg-ghost {
position: absolute;
font-family: var(--font-loud);
font-weight: 400;
line-height: 1;
color: transparent;
user-select: none;
-webkit-text-stroke: 3px rgba(63,33,124,0.12);
text-shadow: none;
pointer-events: none;
will-change: transform, opacity;
animation: ghostDrift 14s ease-in-out infinite alternate;
}
.bg-ghost--1 { font-size: 300px; top: -8%; left: -10%; transform: rotate(-14deg); animation-delay: 0s; }
.bg-ghost--2 { font-size: 240px; top: 28%; right: -12%; transform: rotate( 10deg); animation-delay: 2.6s; }
.bg-ghost--3 { font-size: 210px; bottom: -6%; left: 18%; transform: rotate( -6deg); animation-delay: 5.4s; }
.bg-ghost--4 { font-size: 170px; top: 56%; left: -8%; transform: rotate( 14deg); animation-delay: 8.0s; }
@keyframes ghostDrift {
0% { translate: 0 0; opacity: 0.55; }
50% { translate: 16px -20px; opacity: 0.95; }
100% { translate: -10px 14px; opacity: 0.70; }
}
/* ---------- Floating sparks scattered across the bg ---------- */
.bg-particles {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
}
.bg-particle {
position: absolute;
font-family: var(--font-loud);
font-size: 20px;
line-height: 1;
opacity: 0.55;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
animation: bgFloat var(--dur, 9s) ease-in-out infinite;
animation-delay: var(--delay, 0s);
will-change: transform, opacity;
}
.bg-particle--1 { top: 12%; left: 8%; color: var(--six); }
.bg-particle--2 { top: 22%; right: 14%; color: var(--gold); font-size: 22px; }
.bg-particle--3 { top: 38%; left: 22%; color: var(--seven); font-size: 16px; }
.bg-particle--4 { top: 48%; right: 8%; color: var(--six); font-size: 18px; }
.bg-particle--5 { bottom: 30%; left: 12%; color: var(--gold); font-size: 20px; }
.bg-particle--6 { bottom: 18%; right: 18%; color: var(--seven); font-size: 22px; }
.bg-particle--7 { top: 6%; left: 48%; color: #8f3bff; font-size: 14px; }
.bg-particle--8 { bottom: 8%; left: 44%; color: #00d2ff; font-size: 18px; }
@keyframes bgFloat {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); opacity: 0.45; }
50% { transform: translate(0, -32px) rotate(calc(var(--r, 0deg) + 18deg)); opacity: 0.95; }
}
/* Stronger noise — gives the bg a real screen-print feel */
.bg-noise { opacity: 0.07; mix-blend-mode: multiply; }
/* ---------- Immersive-mode (matching / battle / result):
bg cranks up: more saturated, faster, ghosts brighter ---------- */
body.is-immersive .bg-mesh {
animation-duration: 9s;
filter: saturate(1.35);
background:
radial-gradient(72% 50% at 12% 6%, rgba(44,125,245,0.80), transparent 60%),
radial-gradient(70% 50% at 94% 22%, rgba(255,42,109,0.72), transparent 62%),
radial-gradient(70% 55% at 50% 104%, rgba(255,184,0,0.52), transparent 70%),
radial-gradient(60% 40% at 78% 78%, rgba(143,59,255,0.70), transparent 65%),
radial-gradient(60% 40% at 18% 64%, rgba(0,210,255,0.50), transparent 65%);
}
body.is-immersive .bg-grid {
background-image:
linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
animation-duration: 14s;
}
body.is-immersive .bg-ghost { -webkit-text-stroke-color: rgba(255,255,255,0.16); }
body.is-immersive .bg-particle { opacity: 0.8; }
/* =====================================================
HERO DIGIT DANCE
The 6 and 7 now bob / sway / glow like they're alive.
===================================================== */
.screen--home .digit-img {
transform-origin: 50% 60%;
will-change: transform, filter;
}
.screen--home .digit-img--six {
animation: digitDanceSix 3.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
.screen--home .digit-img--seven {
animation: digitDanceSeven 3.4s cubic-bezier(.45,.05,.55,.95) infinite;
animation-delay: 1.7s;
}
@keyframes digitDanceSix {
0%, 100% {
transform: rotate(-6deg) translateY(0) scale(1);
filter: drop-shadow(0 6px 16px rgba(44,125,245,0.30));
}
25% {
transform: rotate(-3deg) translateY(-5px) scale(1.01);
}
50% {
transform: rotate(-9deg) translateY(-11px) scale(1.03);
filter: drop-shadow(0 18px 32px rgba(44,125,245,0.60))
drop-shadow(0 0 16px rgba(44,125,245,0.35));
}
75% {
transform: rotate(-4deg) translateY(-5px) scale(1.01);
}
}
@keyframes digitDanceSeven {
0%, 100% {
transform: rotate(5deg) translateY(0) scale(1);
filter: drop-shadow(0 6px 16px rgba(255,42,109,0.30));
}
25% {
transform: rotate(7deg) translateY(-5px) scale(1.01);
}
50% {
transform: rotate(10deg) translateY(-11px) scale(1.03);
filter: drop-shadow(0 18px 32px rgba(255,42,109,0.60))
drop-shadow(0 0 16px rgba(255,42,109,0.35));
}
75% {
transform: rotate(6deg) translateY(-5px) scale(1.01);
}
}
/* "OR" between them gets a tiny shimmy and a holo gradient */
.screen--home .hero__or {
background: linear-gradient(135deg, var(--six) 0%, #8f3bff 50%, var(--seven) 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: orShift 3.4s ease-in-out infinite;
}
@keyframes orShift {
0%, 100% { background-position: 0% 50%; transform: scale(1); }
50% { background-position: 100% 50%; transform: scale(1.08); }
}
/* Hero tag: holographic + tiny pulse */
.screen--home .hero__tag {
background: linear-gradient(90deg, var(--six) 0%, #8f3bff 50%, var(--seven) 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 1;
animation: heroTagShift 4.6s ease-in-out infinite;
text-shadow: none;
}
@keyframes heroTagShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Selected side button: add a brighter, side-tinted glow ring
to make the lock-in feel more "claimed" */
.screen--home .side-btn--six.is-selected {
box-shadow:
0 0 0 4px rgba(255,255,255,0.95),
0 0 24px rgba(44,125,245,0.55),
var(--shadow-lift),
inset 0 -4px 0 rgba(0,0,0,0.18);
}
.screen--home .side-btn--seven.is-selected {
box-shadow:
0 0 0 4px rgba(255,255,255,0.95),
0 0 24px rgba(255,42,109,0.55),
var(--shadow-lift),
inset 0 -4px 0 rgba(0,0,0,0.18);
}
/* Matching rings: tint glow on the outer ring */
.screen--matching .ring--3 {
box-shadow: 0 0 40px rgba(143,59,255,0.35);
}
/* =====================================================
BATTLE: BRAINROT TURBO MODE
===================================================== */
/* --- Stage gets a dark electric backdrop --- */
.screen--battle .battle__stage {
background:
radial-gradient(46% 36% at 22% 70%, rgba(44,125,245,0.45), transparent 70%),
radial-gradient(46% 36% at 78% 70%, rgba(255,42,109,0.45), transparent 70%),
radial-gradient(50% 30% at 50% 18%, rgba(255,184,0,0.28), transparent 80%),
linear-gradient(180deg, #16142e 0%, #2a1747 55%, #3d1648 100%);
border: 2px solid rgba(255,255,255,0.10);
box-shadow:
0 22px 42px rgba(63,33,124,0.32),
inset 0 0 0 1px rgba(255,255,255,0.06),
0 0 50px rgba(143,59,255,0.22);
position: relative;
overflow: hidden;
}
/* Pseudo-elements give the stage scanlines + grid without
polluting the existing z-index stack (these sit at z 0). */
.screen--battle .battle__stage::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
180deg,
rgba(255,255,255,0.04) 0 2px,
transparent 2px 5px
);
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
.screen--battle .battle__stage::after {
content: '';
position: absolute; inset: -2%;
background-image:
linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%);
mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%);
pointer-events: none;
z-index: 0;
animation: battleGridDrift 5.4s linear infinite;
opacity: 0.85;
}
@keyframes battleGridDrift {
0% { background-position: 0 0; }
100% { background-position: 28px 28px; }
}
/* Ambient blobs: brighter + faster */
.screen--battle .battle__ambient {
background:
radial-gradient(40% 32% at 22% 70%, rgba(44,125,245,0.65), transparent 70%),
radial-gradient(40% 32% at 78% 70%, rgba(255,42,109,0.65), transparent 70%),
radial-gradient(36% 22% at 50% 28%, rgba(255,184,0,0.35), transparent 80%);
animation-duration: 3.6s;
}
/* Meme banner becomes a holographic shifting badge */
.screen--battle .battle__meme {
background: linear-gradient(135deg, #ffb800 0%, #ff2a6d 35%, #8f3bff 65%, #2c7df5 100%);
background-size: 280% 280%;
color: #fff;
font-size: 11px;
letter-spacing: 2px;
box-shadow:
0 0 0 2px rgba(255,255,255,0.22),
0 10px 26px rgba(255,42,109,0.45),
0 4px 12px rgba(143,59,255,0.40);
animation: memeHolo 2.4s linear infinite;
}
@keyframes memeHolo {
0% { background-position: 0% 50%; }
100% { background-position: 280% 50%; }
}
/* Battle digit: hovers and breathes with a halo */
.screen--battle .battle__digit {
filter:
drop-shadow(0 14px 24px rgba(0,0,0,0.45))
drop-shadow(0 0 26px rgba(255,255,255,0.50));
animation: digitHover 2.6s ease-in-out infinite;
}
@keyframes digitHover {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -54%) scale(1.05); }
}
.screen--battle .battle__digit.is-pop {
animation: digitPopAlpha 220ms cubic-bezier(.3,1.6,.4,1);
}
@keyframes digitPopAlpha {
0% { transform: translate(-50%, -50%) scale(1) rotate(0); }
50% { transform: translate(-50%, -55%) scale(1.30) rotate(-6deg); }
100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}
/* Player cards: bigger score, subtle pulse, color-side glow */
.screen--battle .battle__player {
background: rgba(255,255,255,0.96);
box-shadow: 0 10px 26px rgba(63,33,124,0.20);
}
.screen--battle .battle__player[data-side="6"] {
box-shadow:
0 10px 26px rgba(44,125,245,0.30),
0 0 0 2px rgba(44,125,245,0.22);
}
.screen--battle .battle__player[data-side="7"] {
box-shadow:
0 10px 26px rgba(255,42,109,0.30),
0 0 0 2px rgba(255,42,109,0.22);
}
.screen--battle .battle__player-score {
font-size: 34px;
animation: scorePulse 1.6s ease-in-out infinite;
text-shadow: 0 2px 0 rgba(0,0,0,0.06);
}
@keyframes scorePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* Timer ring gets a glow + the numeric stays dark for legibility
(the timer sits in the .battle__top header above the stage,
so it's on the light holographic bg, NOT the dark stage). */
.screen--battle .battle__timer {
filter: drop-shadow(0 8px 18px rgba(143,59,255,0.40));
}
.screen--battle .timer-ring__bg { stroke: rgba(63,33,124,0.18); }
.screen--battle .timer-ring__fg {
stroke: url(#timerGrad);
filter: drop-shadow(0 0 6px rgba(255,107,0,0.55));
}
/* Fallback if the gradient defs aren't reachable (svg in DOM
doesn't have a ): solid orange */
.screen--battle .timer-ring__fg { stroke: #ff6b00; }
.screen--battle .timer-ring__num {
color: var(--ink);
text-shadow:
0 0 10px rgba(255,255,255,0.85),
0 2px 0 rgba(255,255,255,0.6);
font-weight: 900;
}
/* VS-bar: thicker, glassy, glowing */
.screen--battle .vs-bar {
height: 14px;
background: rgba(0,0,0,0.34);
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.40),
0 0 0 2px rgba(255,255,255,0.14),
0 8px 16px rgba(0,0,0,0.18);
}
.screen--battle .vs-bar__six { background: linear-gradient(90deg, #1e6ae6, #5fa3ff); box-shadow: 0 0 14px rgba(44,125,245,0.55); }
.screen--battle .vs-bar__seven { background: linear-gradient(90deg, #ff5a92, #c4185a); box-shadow: 0 0 14px rgba(255,42,109,0.55); }
/* TAP zone: brighter, more aggressive */
.screen--battle .tap-zone {
background: linear-gradient(180deg, #ffe066 0%, #ffb800 50%, #ff6b00 100%);
box-shadow:
0 10px 0 #b8800d,
0 18px 38px rgba(255,107,0,0.55),
0 0 0 3px rgba(255,255,255,0.22),
inset 0 -8px 16px rgba(255,255,255,0.22);
font-size: 26px;
letter-spacing: 6px;
text-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 0 18px rgba(255,255,255,0.45);
}
.screen--battle .tap-zone:active {
box-shadow:
0 4px 0 #b8800d,
0 6px 14px rgba(255,107,0,0.50),
0 0 0 3px rgba(255,255,255,0.22),
inset 0 -4px 10px rgba(255,255,255,0.18);
}
.screen--battle .tap-zone.is-live {
animation: tapZoneHype 0.9s ease-in-out infinite;
}
@keyframes tapZoneHype {
0%, 100% {
transform: translateY(0);
box-shadow:
0 10px 0 #b8800d,
0 18px 38px rgba(255,107,0,0.55),
0 0 0 3px rgba(255,255,255,0.22),
inset 0 -8px 16px rgba(255,255,255,0.22);
}
50% {
transform: translateY(-3px);
box-shadow:
0 13px 0 #b8800d,
0 22px 44px rgba(255,107,0,0.70),
0 0 0 4px rgba(255,255,255,0.30),
inset 0 -8px 16px rgba(255,255,255,0.22),
0 0 36px rgba(255,184,0,0.55);
}
}
/* Final-rush: stage borders go neon-pink */
.screen--battle .battle__stage.is-final-rush {
border-color: rgba(255,42,109,0.65);
box-shadow:
0 22px 42px rgba(63,33,124,0.32),
inset 0 0 0 1px rgba(255,255,255,0.10),
0 0 70px rgba(255,42,109,0.45);
}
/* When the stage is playing, the meme banner gets bigger glow */
.screen--battle .battle__stage.is-playing .battle__meme {
box-shadow:
0 0 0 2px rgba(255,255,255,0.30),
0 14px 30px rgba(255,42,109,0.55),
0 6px 14px rgba(143,59,255,0.45);
}
/* Floaters: bigger drop shadow so they pop against dark stage */
.screen--battle .floater {
text-shadow:
-1px -1px 0 #fff, 1px -1px 0 #fff,
-1px 1px 0 #fff, 1px 1px 0 #fff,
0 6px 14px rgba(0,0,0,0.35);
}
/* Chaos stickers get a thicker outline for dark-stage legibility */
.screen--battle .chaos-sticker {
box-shadow:
0 0 0 2px rgba(255,255,255,0.28),
0 12px 22px rgba(0,0,0,0.30);
text-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
/* Matching screen also benefits from a darker glow ring */
.screen--matching .ring {
/* lean on existing styles, just tint glow */
box-shadow: 0 0 30px rgba(143,59,255,0.30);
}
/* =====================================================
v0.1.18 — Desktop launch guard
Blocks desktop Telegram / desktop browser and asks user to open on phone.
===================================================== */
body.is-desktop-blocked {
overflow: hidden;
}
body.is-desktop-blocked #app {
opacity: 0;
pointer-events: none;
user-select: none;
}
.desktop-guard[hidden] {
display: none !important;
}
.desktop-guard {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 28px;
min-height: 100vh;
color: var(--ink);
background:
radial-gradient(70% 50% at 18% 10%, rgba(44,125,245,0.24), transparent 64%),
radial-gradient(70% 50% at 82% 12%, rgba(255,42,109,0.24), transparent 64%),
radial-gradient(70% 48% at 50% 100%, rgba(255,184,0,0.16), transparent 70%),
linear-gradient(180deg, #f9f7ff 0%, #ecebff 100%);
overflow: hidden;
}
.desktop-guard::before,
.desktop-guard::after {
content: '6 7 6 7';
position: absolute;
font-family: var(--font-loud);
font-size: clamp(90px, 14vw, 190px);
letter-spacing: 0.05em;
color: rgba(17,17,40,0.045);
white-space: nowrap;
pointer-events: none;
}
.desktop-guard::before {
top: 6%;
left: -8%;
transform: rotate(-8deg);
}
.desktop-guard::after {
right: -10%;
bottom: 5%;
transform: rotate(8deg);
}
.desktop-guard__card {
position: relative;
width: min(100%, 430px);
padding: 28px 24px 24px;
border-radius: 32px;
background: rgba(255,255,255,0.90);
border: 1px solid rgba(17,17,40,0.10);
box-shadow: 0 26px 60px rgba(28,20,76,0.18), 0 0 0 8px rgba(255,255,255,0.32);
text-align: center;
overflow: hidden;
}
.desktop-guard__card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.55) 46%, transparent 70%);
transform: translateX(-120%);
animation: desktopGuardShine 3s linear infinite;
pointer-events: none;
}
@keyframes desktopGuardShine {
100% { transform: translateX(120%); }
}
.desktop-guard__badge {
display: inline-grid;
place-items: center;
min-height: 34px;
padding: 8px 14px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--six), var(--seven));
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.08em;
box-shadow: 0 10px 20px rgba(63,33,124,0.18);
}
.desktop-guard__hands {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 22px 0 10px;
}
.desktop-guard__hands span {
display: grid;
place-items: center;
width: 84px;
height: 84px;
border-radius: 28px;
color: #fff;
font-family: var(--font-loud);
font-size: 48px;
line-height: 1;
box-shadow: 0 14px 28px rgba(17,17,40,0.14), inset 0 -5px 0 rgba(0,0,0,0.15);
}
.desktop-guard__hands span:first-child { background: linear-gradient(180deg, #48a5ff, var(--six)); }
.desktop-guard__hands span:last-child { background: linear-gradient(180deg, #ff5b99, var(--seven)); }
.desktop-guard__hands b {
font-family: var(--font-display);
font-size: 14px;
color: var(--muted);
}
.desktop-guard h1 {
margin: 12px 0 10px;
font-family: var(--font-loud);
font-size: clamp(28px, 5vw, 42px);
line-height: 0.96;
letter-spacing: 0.03em;
}
.desktop-guard p {
margin: 0 auto;
max-width: 330px;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.45;
font-weight: 700;
}
.desktop-guard__qr-note {
margin-top: 18px;
padding: 12px 14px;
border-radius: 18px;
background: rgba(17,17,40,0.06);
color: var(--ink);
font-family: var(--font-display);
font-size: 11px;
line-height: 1.35;
letter-spacing: 0.04em;
}